Bootstrap折疊手風琴：使用JavaScript打開面板不會關閉其他打開的面板

Question

我有一個使用Bootstrap折疊的手風琴。 當我單擊任何面板時，它將打開它並關閉其他打開的面板。 但是，當我嘗試使用JavaScript打開面板時，其他打開的面板不會自動關閉。

 function openBreakfast() { $('#add-breakfast-form').collapse('show'); } function openLunch() { $('#add-lunch-form').collapse('show'); } function openDinner() { $('#add-dinner-form').collapse('show'); } function openSnacks() { $('#add-snacks-form').collapse('show'); } 

 body { padding: 20px; } .mt-20 { margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="food-tracker-accordion" role="tablist" class="panel-group mt-20"> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a> </h4> </div> <div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Breakfast form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a> </h4> </div> <div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Lunch form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a> </h4> </div> <div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Dinner form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a> </h4> </div> <div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Snacks form </div> </div> </div> </div> <div class="mt-20"> <button onclick="openBreakfast()">Open Breakfast</button> <button onclick="openLunch()">Open Lunch</button> <button onclick="openDinner()">Open Dinner</button> <button onclick="openSnacks()">Open Snacks</button> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

另一個有趣的事情是，如果我單擊任何面板以關閉，則通過JavaScript打開該面板會關閉所有其他打開的面板。

Answer 1

您需要做的就是隱藏之前打開的面板，您可以使用$('.panel-collapse.in').collapse('hide'); 像這樣

 function openBreakfast() { $('.panel-collapse.in').collapse('hide'); $('#add-breakfast-form').collapse('show'); } function openLunch() { $('.panel-collapse.in').collapse('hide'); $('#add-lunch-form').collapse('show'); } function openDinner() { $('.panel-collapse.in').collapse('hide'); $('#add-dinner-form').collapse('show'); } function openSnacks() { $('.panel-collapse.in').collapse('hide'); $('#add-snacks-form').collapse('show'); } 

 body { padding: 20px; } .mt-20 { margin-top: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="food-tracker-accordion" role="tablist" class="panel-group mt-20"> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a> </h4> </div> <div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Breakfast form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a> </h4> </div> <div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Lunch form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a> </h4> </div> <div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Dinner form </div> </div> </div> <div class="panel panel-default"> <div role="tab" class="panel-heading"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a> </h4> </div> <div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse"> <div class="panel-body"> Add Snacks form </div> </div> </div> </div> <div class="mt-20"> <button onclick="openBreakfast()">Open Breakfast</button> <button onclick="openLunch()">Open Lunch</button> <button onclick="openDinner()">Open Dinner</button> <button onclick="openSnacks()">Open Snacks</button> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>