对于具有相同 class 的多个元素，仅影响 jquery 中单击的元素

Question

我一直在寻找解决这个问题的方法，但我就是想不通。

我想要的是特定的 header，它被点击成为唯一展开的。

演示在这里：http://jsfiddle.net/bm92L0eg/1/

html:

<h3 class="click-list">header a</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<h3 class="click-list">header b</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<h3 class="click-list">header c</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

jquery:

$('.click-list').click(function() {
    $(this).find('.open-list').slideToggle(600);
});

jquery 代码不起作用，而下面的代码是激活所有 header 的代码：

$('.open-list').slideToggle(600);

Answer 1

使用 .next() 到 select 相邻的 .open-list 元素。

应该是：

$('.click-list').click(function () {
    $(this).next('.open-list').slideToggle(600);
});

Updated Example