JQuery next() - Nhận anh chị em tiếp theo chỉ sử dụng các lớp

Question

Tôi đang cố gắng tạo ra một thứ gì đó như một accordion web.

trực quan ví dụ:

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

Tôi muốn để có thể chuyển đổi (chức năng jquery toggle()) một "Nội dung Div" bằng cách nhấp vào tương ứng "Tiêu đề Div".

Tôi đã thử những điều sau, nhưng nó không hoạt động.

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/

tôi sẽ mô tả quá trình chức năng của tôi như vậy:

1. Khi bạn bấm vào một phần tử với một lớp có tên là "titleDiv", làm:

1,1. Chọn yếu tố được nhấp;

1.1.1. Chọn anh chị em tiếp theo của phần tử đã nhấp đó với một lớp có tên là "contentDiv";

1.1.1.1. Làm cho hàm toggle() hoạt động trên phần tử cuối cùng này (Với lớp có tên là "contentDiv");

Có vẻ như tôi sai hoặc tôi đang thiếu thứ gì đó.

.

Tôi bao gồm jquery 1.8.3 (Chính xác).

Tính năng này hoạt động khi sử dụng ID thay vì các lớp học (Tôi đang cố tránh sử dụng chúng).

Tôi đã đặt cảnh báo bên trong hàm nhấp chuột và nó hoạt động (Vấn đề nằm trong đó).

Answer 1

Sử dụng .nextAll() và :first để có được những contentDiv tiếp theo

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

Demo đây http://jsfiddle.net/Cs3YY/1/

Answer 2

Mặc dù, đó là vì tiếp theo() chọn bottomSeparator. Bạn có thể sử dụng mà lừa

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

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

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