如何使用Javascript / jquery切換手風琴

Question

我試圖讓我的手風琴切換，但似乎什么也沒發生。 通過切換，我的意思是單擊相同的手風琴標題也應將其關閉。 到目前為止，我已經設法通過單擊另一個標題（前一個標題將關閉）使其工作，但是關閉一個打開的標題並將其全部關閉似乎無效。

這是我的腳本：

$(document).ready(function() {
  $("#accordion section h1").click(function(e) {
    $(this).parents().siblings("section").addClass("ac_hidden");
    $(this).parents("section").removeClass("ac_hidden");
    $(this).collapse('toggle')
    e.preventDefault();
  });

});

我試過在函數$(#accordion).collapse('toggle'), I've tried to use之外進行折疊$(#accordion).collapse('toggle'), I've tried to use （'hide'）`，但是沒有運氣。

這是它的一個jsfiddle： Jsfiddle

任何建議將不勝感激！

謝謝

Answer 1

嘗試這個

$("#accordion section h1").click(function(e) {
  if (!$(this).closest('section').hasClass('ac_hidden')) {
    $(this).closest("section").addClass("ac_hidden");
  } else {
    $(this).closest("section").siblings().addClass("ac_hidden");
    $(this).closest("section").removeClass("ac_hidden");
  }
  e.preventDefault();
});

我已經將.parents()更改為.closest()因為它是此方案的更好選擇器，它將抓住我們想要的最接近被單擊標題的部分，然后我添加了一個檢查以確保當前元素沒有ac_hidden類，如果沒有，則將其添加（將當前元素向上滑動），否則我們將另一元素向下滑動，而功能幾乎就是您已經擁有的。 希望能有所幫助。

jsFiddle

Answer 2

這是我的網站benstechgarage.com/accordion.html上的手風琴的javascript代碼

$('.accordion').on('click', '.accordion-control', function(e) {
      e.preventDefault();
      $(this)
        .next('.accordion-panel')
        .not(':animated')
        .slideToggle();
    });

Answer 3

您只需要檢查它是否具有該類，即可關閉if( !$(this).parents("section").hasClass("ac_hidden")){ $(this).parents().addClass("ac_hidden"); console.log(1) return; } if( !$(this).parents("section").hasClass("ac_hidden")){ $(this).parents().addClass("ac_hidden"); console.log(1) return; }

檢查一下： https : //jsfiddle.net/jxyozw5c/3/