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

Question

我正在尝试创建像手风琴一样的东西.

视觉示例:

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

我希望能够通过单击相应的"Title Div"来切换(jquery function toggle())"Content 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>

JQUERY:

$('.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而不是类时起作用(我试图避免使用它们).

我在点击功能中放置了一个警报,它可以正常工作(问题出在其中).

Answer 1

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

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

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