2

ページに 2 種類の div の数があります。1つ目は「メインアイテム」、2つ目は「サブアイテム」です。css を使用してサブアイテムを非表示にしましたが、メイン アイテムをクリックしたときにサブアイテムを表示したいと考えています。試してみましたが、うまくいきません。

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.menu .item {
    color: White;
    width: 250px;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}

.menu .sub-item {
    margin-left: 15px;
    display:none;
}

JS/jQuery

$(".item").click(function() {
    $(this).child().show();
});

また、ここにフィドルがあります：jsFiddle

4

3 に答える 3

4

あなたの jsfiddle にはいくつかのものがありませんでした。まず、jQuery ライブラリが選択されていませんでした。次に、document.Ready イベントで jQuery を実行する必要があります。そうしないと、jQuery はまだ定義されていません。

ここに更新されたfiddleがあります。

    $(document).ready(function() {
        $(".item").click(function () {
            $(this).children('.sub-item').show();
        });
    });

.children()jQueryのメソッドを使用して子要素を選択できますが、他の人が言及しているよう.child()に、メソッドではありません。

于 2013-06-10T16:10:48.783 に答える
4

機能はありませんchild。子を使用したい場合もありますが、より選択的にする方がクリーンです。これを使って ：

$(".item").click(function() {
    $('.sub-item', this).show();
});

デモンストレーション

于 2013-06-10T16:01:41.410 に答える