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();
    });
});

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

.subitem {
    display: none;
}

See it here.