Question

我创建此嵌套列表以显示和隐藏项目，但我想问如何显示一个列表并隐藏其他列表，例如，如果用户点击第二个主题将隐藏所有未打开的项目

HTML

<ul>

    <li class="subject">List item 1 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>

        <li class="subject">List item 2 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
        <li class="subject">List item 3 with subitems:
        <ul id="item">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
</ul>

的javascript

$(function(){
   // $("ul li").children().slideDown("slow");

    $(".subject").click(function(){
        $(this).find("#item").slideToggle("slow");
      });



})
CSS
#item
{
display: none;
}

Answer 1

  $(".subject").click(function(){
    $(this).find("#item").slideToggle("slow");
    $(this).siblings().children('ul').slideUp();
  });

DEMO

或

$(".subject").click(function () {
    $(this).find("#item").slideToggle("slow")
    .end().siblings().children('ul').slideUp();
});

DEMO

Answer 2

我更正了你的标记。您的ID应始终是唯一的;否则使用课程。

$(function(){

    $(".subject").click(function(){
        $('ul.item').not( $(this).find('ul.item') ).slideUp("slow");
        $(this).find('ul.item').slideDown('slow');
    });

});

WORKING JSFIDDLE DEMO

如何显示隐藏元素前一个元素并显示一个嵌套的ul

2 个答案: