0

私はいくつかの問題を抱えており、あなたが助けてくれることを願っています.

次のHTMLコードがあります

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

そして、クリックするとトグルするようにしたいと思います。jQuery に次のコードがあります。

$(function(){

    $('ul.panel').hide();
    $("a.trigger").click(function(){
        $("ul.panel").slideToggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

すべてのアイテムを選択しているため、機能しないことがわかりました。クリックされた実際のトリガーのみを切り替え、すべてを切り替えないようにするにはどうすればよいですか? FIND、SIBLINGS、NEXT などを使用しようとしましたが、できません。

どんな助けでも感謝します。

ありがとうございました！！

4

1 に答える 1

0 
$('a.trigger').click(function() {
    $(this).closest('h4').next('.panel').slideToggle();
});

実施例

ここでの概念は、DOM をトラバースして、コマンドを一般化できる共通点にたどり着くというものです。この例では、共通の祖先 ( ) に移動し、その親要素に関連するh4次のリストを見つけます。テンプレート化されたレイアウトがある場合、これは DOM トラバーサルの非常に一般的な手法です。

于 2012-07-27T00:31:13.287 に答える