bootstrap 手风琴默认折叠所有并像 flipkart 一样工作精简搜索

Question

我正在使用 bootstrap accrodion 进行优化搜索。我需要对手风琴进行一些改动。

我想打开所有手风琴元素的首字母。

如果点击手风琴元素，则当前元素被关闭。

如果我再次单击该元素，该元素将打开，其余元素为 closed.This 是 bootstrap 的默认功能。但是我需要，如果我点击打开的元素，剩下的元素不应该像关闭那样生效。

我想要的是，哪个item点击item只打开或关闭同一个item。它不应该影响剩余的元素。

就像 flipkart 优化搜索一样，它在左侧可用 panel.I 给出 link。

https://www.flipkart.com/mobiles/samsung~brand/pr?sid=tyy,4io&otracker=nmenu_sub_Electronics_0_Samsung

Answer 1

根据accordion documentation可以设置：

为每个 panel-collapse
显示每个 panel-collapse
在每个 hide/show 手风琴事件中，您可以切换 class

例子：

$('.panel-collapse').collapse({
    toggle: false
}).collapse('show');

$('#accordion').on('hide.bs.collapse show.bs.collapse', function (e) {
        $(e.target).prev('div').find('.glyphicon').toggleClass('glyphicon-menu-down glyphicon-menu-up');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life......
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, .....
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3  <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, .....
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap 手风琴默认折叠所有并像 flipkart 一样工作精简搜索

bootstrap accordion default collapse all and working like flipkart refine search

twitter-bootstrap

bootstrap-accordion