Bootstrap：通過JS關閉其他導航菜單

Question

我是Bootstrap和JS的新手。 目前，我有兩個導航欄折疊子菜單。 當另一個打開時，我喜歡關閉所有其他窗口。

找到此代碼段：

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

我把它放在$(document).ready(function(){...}); 。 折疊事件也會觸發此事件，但似乎會關閉所有navbar-collapse元素。 所以為什么？ 以及如何歸檔我的目標？

Answer 1

這是演示

方法1

要一起折疊，您也可以使用類似的方法，您可以折疊所有具有“ in ”類的導航器，因為打開的可折疊具有“ in ”類的導航器。 您可以使用如下腳本捕獲它們，將其關閉。

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

方法二

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