我有一个 Accordion ,当单击另一个元素时,它会关闭一个元素,并且只需单击一次即可打开,两次即可关闭(accordionButton)。 除了添加和删除两个类之外,所有内容都运行良好,这两个类控制它是否有打开或关闭箭头“accordionButtonActive”和“accordionButtonNotactive”,因为这是通过单击进行控制的,所以如果它被关闭,则不会删除和添加新类单击另一个而不是再次单击即可关闭,效果非常好。
我是 Jquery 的新手,很高兴我能尽我所能地完成这项工作,现在我对使最后一部分发挥应有的功能感到有点困惑。
JQuery:
$("div.accordionButton").addClass("accordionButtonNotactive");
//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
if($(this).next().is(':visible')) {
$('div.accordionContent').slideUp('normal');
$(this).addClass("accordionButtonNotactive").removeClass("accordionButtonActive");
} else {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
$(this).removeClass("accordionButtonNotactive").addClass("accordionButtonActive");
}
});
//OPEN FIRST
$("#open").trigger('click');
});
简单的 HTML:
<div class="accordionButton" id="open">Title</div>
<div class="accordionContent">
<p>Content</p>
</div>
最佳答案
当单击任何标题时,您可以删除事件类并为任何同级添加非事件类:
$(this).siblings('.accordionButtonActive')
.removeClass('accordionButtonActive')
.addClass('accordionButtonNotactive');
此外,您可能会发现为 .accordionButton
添加一种样式并为 .accordionButton.active
覆盖该样式会更容易,这样您只需处理一个类.
您还可以使用 toggleClass
,以便只需为当前元素处理该类一次,而不是在一种情况下使用 addClass
,并且另一个中的removeClass
。
关于JQuery addClass removeClass Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10383765/