创建 jQuery 手风琴菜单的更好方法？

Question

我一直在努力学习 Javascript/jQuery 并试图通过在 this 页面上复制粘贴代码来构建手风琴菜单。但是，当我尝试制作多个 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

Update Fiddle 将 id 更改为 class:

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

CSS:

*{
    padding: 0;
    margin: 0;
}

html{
    height: 100%;
}

.sidebar{
    width: 320px;
    height: 100%;
    background-color: ;
}   

.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;
}

并且通过使用 .cat 容器来存放物品只需使用这个 jquery:

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

Answer 2

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

从单击的元素 this 开始，您可以 "traverse the DOM" 到 select 下一个 .panel，忽略所有其他元素:

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

DEMO（使用问题中的 HTML 并适当调整 CSS）

创建 jQuery 手风琴菜单的更好方法？

Better way of creating jQuery accordion menus?

html

css

jquery

accordion