jquery - 创建 jQuery Accordion 菜单的更好方法？

Question

我一直在尝试学习 Javascript/jQuery 并试图通过在 this 上复制粘贴代码来构建 Accordion 菜单页。但是，当我尝试制作多个 div 时，只有第一个有效。如果我将 ID 切换为类，则当我单击时两个 div 都会展开。这是我从 W3Schools 抓取的脚本；

$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });
});

然后在我的 HTML 中

        <div class="flip">Category A</div>
        <div class="panel">
            One <br/>
            Two <br/>
            Three <br/>
            Four <br/>
        </div>
        <div class="flip">Category B</div>
        <div class="panel">
            One <br/>
            Two <br/>
            Three <br/>
            Four <br/>
        </div>

还有 CSS -

#flip, #panel{
    width: 350px;
    text-align: center;
    font-family: arial, sans-serif;
    color: white;
    font-size: 2em;
    margin: 0 auto;
}

#flip{
    height: 40px;
    padding: 10px 0;
    background-color: #cc44ff;
}

#panel{
    display: none;
    background-color: orange;
}

如果我复制函数和类并给它们新的名称，我已经设法让它工作，但它看起来很乱而且没有必要。有没有更清洁的方法来做到这一点？

我也将其发布到 JSFiddle - http://jsfiddle.net/Nikf/k1wstb5n/

Answer 1

问题是 $(".panel") 处理所有匹配元素，而不仅仅是感兴趣的元素。

从单击的元素 this 开始，您可以“遍历 DOM”以选择 next .panel，忽略所有其他元素:

$(".flip").click(function() {
    $(this).next(".panel").slideToggle("slow");
});

DEMO (使用问题中的 HTML 和适当调整的 CSS)