切換打開/關閉手風琴

Question

我需要使用相同的按鈕使手風琴菜單切換為打開/關閉狀態。

目前，它只是打開，我無法關閉它。

我的代碼在下面，或者這是我的jsFiddle： http : //jsfiddle.net/ndczc728/5/

//Accordion
(function($) {

var allPanels = $('ul.sub-level').hide();

$('.click-me').click(function() {
    $this = $(this);
    $target =  $this.next();

    if(!$target.hasClass('active')){
        allPanels.removeClass('active').slideUp();
        $target.addClass('active').slideDown();
    }

    return false;
});

})(jQuery);

Answer 1

非常簡單...只需將else語句添加到您的If語句中：

//Accordion
(function($) {

    var allPanels = $('ul.sub-level').hide();

    $('.click-me').click(function() {
      $this = $(this);
      $target =  $this.next();

      if(!$target.hasClass('active')){
         allPanels.removeClass('active').slideUp();
         $target.addClass('active').slideDown(); 
      }
      else
      {
         allPanels.removeClass('active').slideUp();
      }

    return false;
    });

})(jQuery);

工作的JSFiddle： http ： //jsfiddle.net/ndczc728/15/

Answer 2

您從未備份過它。

http://jsfiddle.net/ndczc728/8/

    if(!$target.hasClass('active')){
         $target.addClass('active').slideDown();
      }
      else
      {
         $target.removeClass('active').slideUp();
      }

Answer 3

這是跟蹤計數的簡單修補程序：

演示

(function ($) {
    $('ul.sub-level').hide();
    var c = 1;
    $('.click-me').click(function () {
        c++ % 2 == 0 ? $('ul.sub-level').slideUp() : $(this).next().slideDown();
        return false;
    });
})(jQuery);