Блог

Я создаю этот вложенный список, чтобы показывать и скрывать элементы, но я хочу спросить, как я могу показать один список и скрыть другой, например, если пользователь нажмет на вторую тему, скроет все открытые элементы

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

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

ДЕМОНСТРАЦИЯ

или

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

ДЕМОНСТРАЦИЯ

Я исправил вашу разметку. Ваши идентификаторы всегда должны быть уникальными; в противном случае используйте классы.

 $(function(){

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

});
  

РАБОЧАЯ ДЕМОНСТРАЦИЯ JSFIDDLE