创建jQuery手风琴插件的困难（Super Neat！）

Question

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

我的主要目标是拥有一个超级简洁的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 ，并从其余包装器中删除该类名。


我不能做的：

滑动/隐藏所有非“ .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);
    });
});

演示

我添加了.find('.content')和.slideUp(300); 到您的连锁店。

Answer 2

您应该使用小功能进行编程，以便可以在更多情况下重用它们，例如，在这种情况下，您可以执行以下操作：

$(function(){
    // Asociate toggleContents function to element click
    $('.accordion-toggle').on('click', toggleContents);

    function toggleContents (event) {
        var $this = $(this);
        hideContents($this);
        showContents($this);
    }

    function showContents ($obj) {
        //We show the contents, using dequeue, for fixing queues on mutliple user clicks
        $('.content', $obj.parent())
            .addClass('active')
            .slideDown(300)
            .dequeue();
    }

    function hideContents ($obj) {
        $('.active.content', $obj.parents('.accordion'))
            .removeClass('.active')
            .slideUp(300)
            .dequeue();
    }
});