隐藏所有div并只显示被点击的那个

Question

我创建了3个无序列表，其中包含两个列表项。全部包含相同的类。我的问题是我不知道如何隐藏<ul>，当点击1个项目时已经打开它。我已经尝试了下面的代码，以便我仍然可以切换该项目，但唯一的问题是您可以同时打开所有项目。

$('.click_me').click(function(event){ 
       event.preventDefault(); 
       $(this).next('.ul_lists').toggle(); 

      }); 



    <a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 


    <a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 


    <a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 

Answer 1

尝试

$('.click_me').click(function(event) 
{ 
    var display = $(this).next('.ul_lists').css("display"); 
    $(".ul_lists").hide(); 
    $(this).next('.ul_lists').css("display", display); 
    event.preventDefault(); 
    $(this).next('.ul_lists').toggle(); 
}); 

Answer 2

$('.click_me').click(function(event){ 
      event.preventDefault(); 
      $('.ul_lists').hide(); 
      $(this).next('.ul_lists').show(); 

     }); 


<a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 


    <a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 


    <a class="click_me" href="#">Click Me></a> 
    <ul class="ul_lists"> 
     <li><a href="#" class="list_1">Some Item</a></li> 
     <li><a href="#" class="list_2">Some Item</a></li> 
    </ul> 

这将关闭所有UL，然后打开一个点击。基本上关闭一个打开的，如果有的话。

您也可以使用技工来为打开的元素添加类或ID，并关闭该元素。