1

次の構造を取得しました: - ネストされた 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>

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

4

5 に答える 5

1

これを試して。

$(document).ready(function() {

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

});

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

于 2013-08-06T19:12:40.880 に答える
1

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

$(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」の適切な使用に関する他の回答情報をお読みください。

于 2013-08-06T19:13:07.407 に答える
1

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

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

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

于 2013-08-06T19:13:19.067 に答える
1
$(this).find('ul:hidden').slideDown(800);
于 2013-08-06T19:13:26.660 に答える