0

まず、次のようなリストを含むHTMLドキュメントがあります。

<ul class="item">
    <li> Item 1
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li> Item 2 
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li> 
    <li> Item 3 
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
</ul>

Javascriptリストアイテムからアイテムをクリックすると、そのサブアイテムが表示されるコードを記述したいと思います。アイテムリストから別のアイテムをクリックすると、表示されているすべてのサブアイテムが非表示になり、押したサブアイテムだけが表示されます。

これまでのところ私はこれを持っています：

$(document).ready(function(){
    $('.subitem').each(function()
    {
        $(this).hide();
    }
    $('.item').live("click",function(){
        $(this).next(".subitem").show();
    });
});

ただし、非表示のサブアイテムも表示されません。私を手伝ってくれますか？

4

3 に答える 3

2

このようなことをする必要があります。

$(function () {
    var $subitem = $(".subitem");

    $('.item').on("click", "li", function () {
        /* Hide all .subitem */
        $subitem.hide();
        /* Show children .subitem */
        $(this).children(".subitem").show();
    });
});

JavaScript を使用してすべての.subitem初期化を非表示にする代わりに、CSS を使用できます。

.subitem {
    display: none;
}

こちらをご覧ください。

于 2013-01-22T17:13:07.880 に答える
1

試す

$('.item').on('click','li', function(){
   $(this).children(".subitem").show()
   .end().siblings().find('.subitem').hide();
});

http://jsfiddle.net/gaby/aMWMu/1/のデモ

于 2013-01-22T17:16:09.957 に答える
0 
$('.subitem').hide();

$('.item > li').on("click",function(){
    $(this).parent().find(li .subitem).hide()
    $(this).find(".subitem").show();
});
于 2013-01-22T17:12:07.800 に答える