簡單的jQuery手風琴切換

Question

我正在使用jQuery切換狀態的簡單手風琴。 到目前為止，一切都很好，但是當我單擊的開關與最初單擊時所單擊的開關不同時，它將自動進行開關，而前一個開關處於打開狀態。

如何進行某種檢查以查看是否打開了另一個檢查並同時切換其狀態？

這是小提琴。 隨便擺弄幾秒鍾，您就會明白我的意思。

// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {

  // State change visuals
  $(this).toggleClass('opened');

  //Expand or collapse this panel
 $(this).next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

});

Answer 1

正如我在上面的評論中所述，這里是一個工作的小提琴。

問題是，當您打開一個手風琴項目時，不允許打開其他項目，這意味着您必須清除代表打開狀態的每個類。

工作小提琴

// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {
    $('.accordion-toggle').not(this).each(function(){
    $(this).removeClass("opened");
  });
  // State change visuals
  $(this).toggleClass('opened');

  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

});

Answer 2

使用This而不是toggleClass ：

// State change visuals
 $('.accordion-toggle').removeClass('opened');
 $(this).addClass('opened');

小提琴： https : //jsfiddle.net/cndnnww5/5/