Bootstrap:通过JS关闭其他导航菜单

Question

我是bootstrap和JS的新手。目前，我有两个导航栏折叠子菜单。我喜欢当另一个打开的时候，关闭所有其他的。

找到此代码片段:

$(function () {
    $('.navbar-collapse').on('show.bs.collapse', function (e) {
        $('.navbar-collapse').not(this).collapse('hide');
    });
});

我把它放在$(document).ready(function(){...});。此事件也会在折叠事件时触发，但似乎会关闭所有导航栏折叠元素。所以为什么?如何将我的目标存档?

Answer 1

这是演示

方法1

要将所有折叠在一起，你也可以使用类似的东西，你可以折叠所有的导航类"in"，因为打开的折叠有类"in"添加。您可以使用下面的脚本关闭它们。

 $('#accordion .collapse').on('show.bs.collapse', function (e) {
        $('#accordion .in').collapse('hide');
    });

方法2

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-minus"></span> <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Link 1    Link 1    Link 1    Link 1    Link 1    Link 1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-plus"></span> <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Link 2  Link 2  Link 2  Link 2  Link 2  Link 2
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-plus"></span> <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Link 3  Link 3  Link 3  Link 3 Link 3   Link 3  Link 3
            </div>
        </div>
    </div>
</div>