0

我创建了 3 个 unorderlist，其中包含两个列表项。所有都包含相同的类。我的问题是我不知道如何隐藏<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>
4

2 回答 2

0

尝试

$('.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();
});
于 2013-04-24T06:11:49.683 回答
0 
$('.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 添加到打开的元素并关闭该元素。

于 2013-04-24T06:12:13.947 回答