15

私はウェブアコーディオンのようなものを作成しようとしています。

視覚的な例：

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

それぞれの「TitleDiv」をクリックして「ContentDiv」を切り替えられるようにしたい（jquery関数toggle（））。

次のことを試しましたが、うまくいきません。

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」という名前のクラスを使用）。

私が間違っているか、何かが足りないようです。

。

私はjquery1.8.3を含めています（正しく）。

これは、クラスの代わりにIDを使用する場合に機能します（私はそれらの使用を避けようとしています）。

クリック機能の中にアラートを配置しましたが、機能します（問題はその中にあります）。

4

2 に答える 2

38

を使用.nextAll()し:firstて次のcontentDivを取得します

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

こちらのデモhttp://jsfiddle.net/Cs3YY/1/

于 2013-02-15T13:16:39.277 に答える
-1

ただし、next() が bottomSeparator を選択するためです。あなたはそのトリックを使うことができます

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

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

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

于 2013-02-15T13:23:30.430 に答える