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/

我会这样描述我的功能过程：

当您点击名为“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/

Answer 2

虽然，这是因为next（）选择bottomSeparator。你可以使用那个技巧

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

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

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

JQuery next（） - 仅使用类获取下一个兄弟

2 个答案: