0
我有一个包含自举折叠面板列表的页面。我首先查询内容数据库中动态创建这些面板,请参阅下面的代码:自举折叠面板上的过滤器
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
这工作得很好,所有,但我接下来要做到的是增加一个过滤器,只显示面板具有一定的上课。正如你在上面的代码中看到的,我使用类“panel panel-default m('month')创建了div,它们都有一个名为”panel-group“的父级div。
WHen我从下拉列表中选择一个月按钮,如下图所示,我拿一个月的价值/ ID为jQuery的作为滤波器输入。
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation"><a href="#">January</a></li>
<li value="february" id="m2" role="presentation"><a href="#">February</a></li>
<li value="march" id="m3" role="presentation"><a href="#">March</a></li>
<li value="april" id="m4" role="presentation"><a href="#">April</a></li>
<li value="may" id="m5" role="presentation"><a href="#">May</a></li>
<li value="june" id="m6" role="presentation"><a href="#">June</a></li>
<li value="july" id="m7" role="presentation"><a href="#">July</a></li>
<li value="august" id="m8" role="presentation"><a href="#">August</a></li>
<li value="september" id="m9" role="presentation"><a href="#">September</a></li>
<li value="october" id="m10" role="presentation"><a href="#">October</a></li>
<li value="november" id="m11" role="presentation"><a href="#">November</a></li>
<li value="december" id="m12" role="presentation"><a href="#">December</a></li>
</ul>
</div><!--/.dropdown1 -->
到目前为止,我有以下的jQuery代码。那并不是“面板组”的每一个孩子的div我们可以说m10(=十月)必须隐藏。
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
我一直在尝试很多,已搜查所有在互联网上的满足我需要的答案,但至今没有运气:(
我认为你的意思.show()与最后的声明?不幸的是,这并不能解决问题。奇怪,因为这应该是正确的? – Beeelze 2014-10-01 13:02:53
@MarijnvanGool还有另一个错字(.panel1 insepa的.panel)。试试吧 - 它应该可以正常工作 – Steve 2014-10-01 13:06:27
$(“。panel-group .panel.panel-default”)。hide(); \t \t \t $(“。panel-group .panel.panel-default。”+ this.id).show(); < - 然而这个技巧! – Beeelze 2014-10-01 13:06:44