javascript - 隐藏和显示列表和子列表

Question

首先，我有一个 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();
    });
});

但它甚至不显示隐藏的子项。请问你能帮帮我吗？

Answer 1

你需要做这样的事情。

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

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

.subitem您可以使用 CSS，而不是使用 JavaScript 隐藏所有at 初始化。

.subitem {
    display: none;
}

看这里。

Answer 2

尝试

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

演示在http://jsfiddle.net/gaby/aMWMu/1/

Answer 3

$('.subitem').hide();

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