Question

我创建了3个unorderlist，其中包含两个列表项。所有包含相同的类。我的问题是我不知道如何隐藏单击1项时已经打开的<ul>。我已经尝试过以下代码，这样我仍然可以切换项目，但唯一的问题是你可以同时打开所有项目。

$('.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，然后打开单击的UL。基本上关闭打开的那个。

您还可以使用机制向打开的元素添加类或ID，然后关闭该元素。

隐藏所有div并仅显示单击的div

2 个答案: