Bootstrap Collapse Accordion：通过JavaScript打开面板不会关闭其他打开的面板

Question

我有一架使用Bootstrap Collapse的手风琴。当我点击任何面板时，它会打开它并关闭其他打开的面板。但是当我尝试使用JavaScript打开面板时，其他打开的面板不会自动关闭。

＆＃13;

＆＃13;

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');
}

＆＃13;

body {
  padding: 20px;
}

.m-t-20 {
  margin-top: 20px;
}

＆＃13;

<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 m-t-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="m-t-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>

＆＃13;

＆＃13;

＆＃13;

另一个有趣的事情是，如果我点击要关闭的任何面板，通过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;
}

.m-t-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 m-t-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="m-t-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>