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