Question

我是bootstrap和JS的新手。目前，我有两个navbar-collapse子菜单。当另一个人打开时，我喜欢关闭所有其他人。

找到此代码邮箱：

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

我把它放在$(document).ready(function(){...});中。此事件也将在崩溃事件中触发，但似乎关闭所有navbar-collapse元素。所以为什么？如何归档我的目标？

Answer 1

以下是演示

方法1

要折叠在一起你也可以使用类似的东西，你可以折叠所有具有“ 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>

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

1 个答案: