目前,我已经设置了一个手风琴页面,因此当您单击每个手风琴选项卡时,它会折叠上方或下方的那个。
我想实现的是,您可以单击打开的手风琴标签,然后将其关闭。
我的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/