Bootstrap手风琴菜单不起作用

Question

我设计了一个像图像中的手风琴菜单。 如果单击菜单，打开的菜单将关闭。这是手风琴的功能。 但在这个设计中，我逐个点击菜单，但前一个没有关闭..如何解决这个问题？ 提前致谢

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

通过上面的代码，我们可以参考已经打开的手风琴并在打开另一个之前关闭它。

 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> 

Answer 2

注意：首先这不是bootstrap手风琴

这是解决方案，只需在单击时添加这两行

$(".accordion").removeClass("active");
$(".panel").removeClass("show");

最好像这样写一些东西（ Pure JQuery ）

jQuery(document).ready(function() {
    $(".accordion").click(function(){
    $(".accordion").removeClass("active");
    $(".panel").removeClass("show");
    $(this).addClass("active");
    $(this).next(".panel").addClass("show");
  })
});

小提琴

Answer 3

如果您只想让其他人向下滑动而其他人向下滑动，请使用以下代码：

$('.accordion').click(function() {
    var targetElement = $(this).next('.panel');
    targetElement.slideToggle();
    targetElement.siblings('.panel').slideUp();
});

例如CODEPEN

请享用... ：）

Answer 4

用jQuery做正确的事：

jQuery(document).ready(function () {
  $('.accordion').on('click', function() {
    var target = $(this),
      activeEl = $('.active'),
      openedEl = $('.show');

      // remove the active state
      activeEl.removeClass('active');
      openedEl.removeClass('show');
      // add active state for unactive elements only
      if(!target.is(activeEl)) {
        target.addClass('active');
        target.next().addClass('show');
      }
  });
});