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

Question

我正在创建一个供个人使用的 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”包装器内的内容


我将感谢您的帮助。

Answer 1

你可以使用这个:

$(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); 添加到您的链中。