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.

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

隐藏和显示列表和子列表

3 个答案: