jquery - 如何折叠 Accordion 标签？

Question

目前我已经设置了一个 Accordion 页面，因此当您单击每个 Accordion 选项卡时，它会折叠上方或下方的页面。

我想要实现的是您可以单击打开的 Accordion 选项卡，然后可以将其关闭。

我的 HTML 如下:

<dl class="accordion">
            <dt class="title">
                <p>Accordion 1</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
            <dt class="title">
                <p>Accordion 2</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 3</p>
             </dt>
            <dd>
                <p>Some text for the accordion here...</p>
            </dd>
<dt class="title">
                <p>Accordion 4</p>
               </dt>
                <dd>
                <p>Some text for the accordion here...</p>
            </dd>
</dl>

我的 Jquery 是:

(function($) {
var allPanels = $('.accordion > dd').hide();
    $('.accordion > dd:first-of-type').show();
    $('.accordion > dt:first-of-type').addClass('accordion-active');
  jQuery('.accordion > dt').on('click', function() {
      $this = $(this);
  $target = $this.next(); 
  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  }    
return false;
  });

})(jQuery);

Answer 1

您检查元素是否有 accordition-active 类，因此添加 else 部分。

  if(!$this.hasClass('accordion-active')){
      $this.parent().children('dd').slideUp();

      jQuery('.accordion > dt').removeClass('accordion-active');
      $this.addClass('accordion-active');
      $target.addClass('active').slideDown();
  } else {

      $this.removeClass('accordition-active');
      $this.parent().children('dd').slideUp();
  }

http://jsfiddle.net/h28n5aw5/