Javascript 创建jQuery手风琴插件的困难（超级整洁！）

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

我的主要目标是拥有一个超级复制程序、整洁的JS代码和HTML结构。

这就是我走了多远

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>

快速总结：

使用父函数和同级函数，单击切换将添加其包装器的类名.active，并将从其余包装器中删除此类名。


我不能做的事：

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

---

我添加了

.find（'.content'）

和

.slideUp（300）到您的链。
您应该使用小函数编程，以便在更多情况下可以重用它们，例如，在您的情况下，您可以执行以下操作：

$(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();
    }
});

出于好奇，为什么要重新发明轮子？Bootstrap可以做到这一点，它被广泛采用？嗨，我已经在使用Bootstrap框架了。但它远不如我在这里想要实现的灵活。编辑：问题之一是您无法访问活动标题的标题。如果我错了，请告诉我。您的代码似乎工作得很好。另外，我将研究Find函数。谢谢你，塞吉奥。@user3121234，很高兴我能帮忙。如果我可以再问一个问题的话。如何关闭打开的手风琴？@user3121234，您使用的是向下/向上滑动，因此您可以使用相同的方式。您也可以使用（更好的）CSS转换，将用它更新我的答案。@user3121234，实际上CSS转换对高度有限制。使用
$（'.accordion.content'）.slideUp（300）如果你想把它们全部关闭。问题是我不会把它用得这么广泛，我需要这样写。当然，使用你的方式更好，更灵活，但我正在寻找一些真正简单的方法。非常感谢。
$(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();
    }
});