jquery - Bootstrap Accordion 菜单不起作用

Question

我设计了一个如图所示的 Accordion 菜单。如果单击菜单，打开的菜单将关闭。这就是 Accordion 的功能。但在这个设计中，我一个一个地点击菜单，但前一个没有关闭。如何解决这个问题？提前致谢

jQuery(document).ready(function () {
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function () {
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        };
    }
    
});

.boot-accordian {
  padding-top: 2%;
}
.boot-accordian button.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8% 1% 0.8% 3%;
}
.boot-accordian .para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}
.boot-accordian button.accordion.active,
.boot-accordian button.accordion:hover {
  background-color: #362f29;
}
.boot-accordian button.accordion:after {
  font-size: 13px;
  font-family: FontAwesome;
  content: "\f067";
  float: right;
}
.boot-accordian button.accordion.active:after {
  content: "\f068";
  font-family: FontAwesome;
  font-size: 13px;
}
.boot-accordian div.panel {
  padding: 0 18px;
  display: none;
  background-color: #433a31;
}
.boot-accordian div.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
<button class="accordion">listings</button>
<div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">contract information</button>
 <div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of  contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">letter templates</button>
 <div class="panel">
 <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of  contracts, title policies - and send important date reminders to your Outlook or Google Calendaraccounts, iphone or Blackberry.</p>
</div>
<button class="accordion">tasks and task templates</button>
 <div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
<button class="accordion">secure file storage</button>
<div class="panel">
<p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
</div>
  <button class="accordion">reports</button>
 <div class="panel">
 <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook or Google Calendar accounts, iphone or Blackberry.</p>
 </div>
 </div>

Answer 1

请看一下这个 jQuery 方法:

if (!$(this).hasClass("active")) {
     var oldAcc = $(".accordion.active");
     oldAcc.toggleClass("active");
     oldAcc.next().toggleClass("show");
}

通过上面的代码，我们可以引用已经打开的 Accordion 并在打开另一个 Accordion 之前将其关闭。

jQuery(document).ready(function() {

  $(".accordion").click(function() {
    if (!$(this).hasClass("active")) {
      var oldAcc = $(".accordion.active");
      oldAcc.toggleClass("active");
      oldAcc.next().toggleClass("show");
    }
    $(this).toggleClass("active");
    $(this).next().toggleClass("show");


  });

});

.boot-accordian {
  padding-top: 2%;
}
.boot-accordian button.accordion {
  text-transform: uppercase;
  background-color: #362f29;
  color: #e96f0a;
  cursor: pointer;
  width: 100%;
  border: none;
  border-top: 1px solid #3e352c;
  border-bottom: 1px solid #3e352c;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  padding: 0.8% 1% 0.8% 3%;
}
.boot-accordian .para {
  padding-left: 1px;
  padding-top: 2%;
  font-size: 15px;
}
.boot-accordian button.accordion.active,
.boot-accordian button.accordion:hover {
  background-color: #362f29;
}
.boot-accordian button.accordion:after {
  font-size: 13px;
  font-family: FontAwesome;
  content: "\f067";
  color: @color_24;
  float: right;
}
.boot-accordian button.accordion.active:after {
  content: "\f068";
  font-family: FontAwesome;
  font-size: 13px;
}
.boot-accordian div.panel {
  padding: 0 18px;
  display: none;
  background-color: #433a31;
}
.boot-accordian div.panel.show {
  display: block;
  margin: 0;
  padding-bottom: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
  <button class="accordion">listings</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">contract information</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">letter templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendaraccounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">tasks and task templates</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">secure file storage</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
  <button class="accordion">reports</button>
  <div class="panel">
    <p class="para">Store all the necessary contract information such as important dates, closer & agent contact information, special contract teams, etc. You can even upload digital copies of contracts, title policies - and send important date reminders to your Outlook
      or Google Calendar accounts, iphone or Blackberry.</p>
  </div>
</div>