gpt4 book ai didi

javascript - 创建 jQuery Accordion 插件的困难( super 整洁!)

转载 作者:行者123 更新时间:2023-11-28 08:38:58 28 4
gpt4 key购买 nike

我正在创建一个供个人使用的 jQuery Accordion 插件。

我的主要目标是拥有 super 简洁的 JS 代码和 HTML 结构。

这就是我已经走了多远 http://jsfiddle.net/QA2eH/

HTML 结构:

<div class="accordion">

<div class="accordion-wrapper">
<div class="accordion-toggle">
Collapsible Group Item #1
</div>
<div class="content">
<p>Mea regione persecuti ne. suscipi one antur duo ne, elitr voluptua conceptam at eam</p>
</div>
</div>

<div class="accordion-wrapper">
<div class="accordion-toggle">
Collapsible Group Item #2
</div>
<div class="content">
<p>Mea regione persecuti ne. suscipi one antur duo ne, elitr voluptua conceptam at eam</p>
</div>
</div>

<div class="accordion-wrapper">
<div class="accordion-toggle">
Collapsible Group Item #3
</div>
<div class="content">
<p>Mea regione persecuti ne. suscipi one antur duo ne, elitr voluptua conceptam at eam</p>
</div>
</div>

</div>

JS代码(尚未完成)

$(function(){
$('.accordion .accordion-wrapper .accordion-toggle').on('click',function(){
$(this).next('.content').slideDown(300).parent().addClass('active').siblings().removeClass('active');
});
});





快速摘要:

使用父函数和同级函数,单击切换将为其包装器添加一个类名.active,并将从其余包装器中删除该类名。


我不能做什么:

SlideUp/隐藏所有非“.active”包装器内的内容


我将感谢您的帮助。

最佳答案

你可以使用这个:

$(function () {
$('.accordion .accordion-wrapper .accordion-toggle').on('click', function () {
$(this)
.next('.content')
.slideDown(300)
.parent()
.addClass('active')
.siblings()
.removeClass('active')
.find('.content')
.slideUp(300);
});
});

Demo

我将 .find('.content').slideUp(300); 添加到您的链中。

关于javascript - 创建 jQuery Accordion 插件的困难( super 整洁!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20727378/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com