javascript - Jquery セレクター: ユーザーがカテゴリ 1/2/3 をクリックするたびに、その `` が表示されます

Question

次の構造を取得しました: - ネストされた UL

<ul>
<li>Category 1
    <ul>
        <li> Category 1.1</li>
        <li> Category 1.2</li>
        <li> Category 1.3</li>
    </ul>
</li>
<li> Category 2
    <ul>
        <li>Category 2.1</li>
        <li>Category 2.2</li>
        <li>Category 2.3</li>
    </ul>
</li>
<li>Category 3
    <ul>
        <li>Category 3.1</li>
        <li>Category 3.2</li>
        <li>Category 3.3</li>
    </ul>
</li>

CSSでルールを適用しました：

ul{
    list-style: none;
    padding:0;
    margin:0;
}
ul ul{
    display:none;
}

MAIN カテゴリのみが表示されます。

私がやろうとしていたのは、ユーザーがカテゴリ 1/2/3 をクリックするたびに、それ<ul>が表示されるということです。私はこのコードを試しました：

$(document).ready(function() {

    $("ul li").click(function() {
        $(this + "ul").Slidedown(800);
    });

}); 

まあ、基本的には<ulmain 内にある要素を選択しようとしていました<ul>。

どうすればいいのですか？

Answer 1

これを試して。

$(document).ready(function() {

    $("ul li").click(function() {
        $(this).find('ul').Slidedown(800);
    });

});

セレクターを指定すると、クリックするとコールバックも呼び出されますが、タグCategory 1.1がないため何もしません。ulそれでも、 を追加してclass、それらにのみイベントをバインドすることをお勧めします。

Answer 2

このようなものはうまくいくはずです

$(document).ready(function() {

    $("ul > li").click(function() {
        $(this).find("> ul").Slidedown(800);
    });

}); 

ただし、さらに効率的なアプローチ (イアンに感謝) は次のようになります。

$(document).ready(function() {

    $("ul").children('li').click(function() {
        $(this).children("ul").Slidedown(800);
    });

}); 

「>」演算子を使用すると、直接の子のみを検索するよう jquery に指示されます。「>」を使用しない場合、ネストされた ul 内の li 要素にもコードが適用されます。また、「this」の適切な使用に関する他の回答情報をお読みください。

Answer 3

this文字列ではなく、DOM 要素です。

の代わりに$(this + "ul")、 が必要です$('ul', this)。

PS.Slidedownである必要があります.slideDown。

Answer 4

$(this).find('ul:hidden').slideDown(800);