Question

我有一个包含Bootstrap collapsion面板列表的页面。我首先通过查询数据库中的内容来动态创建这些面板，请参阅下面的代码：

<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>

这样可以正常工作，但我接下来想要完成的是添加一个过滤器，该过滤器仅显示具有特定类的面板。正如您在上面的代码中所看到的，我创建了带有类＆＃34;面板 - 默认m（＆＃39; month＆＃39;）的div，它们都有一个父div，名为＆＃34; panel-group＆＃34;

当我从下拉按钮中选择一个月时，如下所示，我将月份的值/ 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代码。每个孩子都是＆＃34; panel-group＆＃34;那个没有上课的地方让我们说必须隐藏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();

    });
});

我一直在努力，并在互联网上搜索满足我需要的答案，但到目前为止没有运气:(

Answer 1

隐藏所有内容，然后显示正确的内容：

$(function(){
    $("#select1").on('click', 'li', function(){
        $("#dropdownMenu1").text($(this).text());
        $("#dropdownMenu1").val($(this).text());    

        $(".panel-group .panel").hide();

        $(".panel-group .panel.panel-default."+this.id).show();

    });
});

在bootstrap collapsion面板上过滤

1 个答案: