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

我想实现的是,您可以单击打开的手风琴标签,然后将其关闭。

我的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);

最佳答案

您检查元素是否具有类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/

关于jquery - 如何折叠 Accordion 标签?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30648425/

10-11 23:25
查看更多