jquery - JQuery next() - 仅使用类获取下一个兄弟

Question

我正在尝试创建类似网络手风琴的东西。

视觉示例：

[TITLE DIV 1]
[CONTENT DIV 1]
[TITLE DIV 2]
[CONTENT DIV 2]
[TITLE DIV 3]
[CONTENT DIV 3]

我希望能够通过单击相应的“标题 Div”来切换（jquery 函数切换（））“内容 Div”。

我尝试了以下方法，但它不起作用。

http://jsfiddle.net/Cs3YY/

HTML：

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 1</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 1</h2></div>

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 2</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 2</h2></div>

查询：

$('.titleDiv').click(function() {       
        $(this).next('.contentDiv').toggle();
});

http://jsfiddle.net/Cs3YY/

我会这样描述我的函数过程：

1. 当您单击具有名为“titleDiv”的类的元素时，请执行以下操作：

1.1。选择被点击的元素；

1.1.1。选择具有名为“contentDiv”的类的单击元素的下一个兄弟；

1.1.1.1。使函数 toggle() 作用于最后一个元素（使用名为“contentDiv”的类）；

看来我错了，或者我错过了一些东西。

.

我包括 jquery 1.8.3（正确）。

这在使用 ID 而不是类时有效（我试图避免使用它们）。

我在 click 函数中放置了一个警报，它可以工作（问题就在里面）。

Answer 1

使用.nextAll()and:first获取下一个 contentDiv

  $(this).nextAll('.contentDiv:first').toggle();

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

Answer 2

虽然，这是因为 next() 选择了底部分隔符。你可以使用这个技巧

$('.titleDiv').click(function() {       

    $(this).next().next().toggle();
});    

http://jsfiddle.net/Cs3YY/12/