如何仅显示当前li的孩子并隐藏其他li孩子

Question

我的页面中有多个嵌套的ul。通过以下jquery代码显示嵌套的ul。

jQuery的

$("li").click(function(){ 
    $(this).children("ul").show("slow"); 
}); 

但我想在同一时间只显示一个嵌套的UL认证。我的意思是当我点击一个li时，它应该只显示它​​的子ul并隐藏其他子ul。我在我以前的jquery代码中添加了以下行：

$("li ul").not(this).hide("slow"); 

但它不起作用。

CSS

li ul{ 
    display:none; 
} 

HTML

<li> 
    <a href="#">Insert + </a> 
    <ul> 
     <li> 
      <a href="services.php">Services</a> 
     </li> 
     <li> 
      <a href="notice.php">Notice and Information</a> 
     </li> 
    </ul> 
</li> 

<li> 
    <a href="#">View + </a> 
    <ul> 
     <li> 
      <a href="services.php">Comments</a> 
     </li> 
     <li> 
      <a href="notice.php">Status</a> 
     </li> 
    </ul> 
</li> 

Answer 1

试试这个代码

$("li").click(function(){ 
    $("li").not(this).children("ul").hide("slow"); 
    $(this).children("ul").show("slow"); 
}); 

$("li").click(function(){ 
 
    $("li").not(this).children("ul").hide("slow"); 
 
    $(this).children("ul").show("slow"); 
 
});

li ul{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<li> 
 
    <a href="#">Insert + </a> 
 
    <ul> 
 
     <li> 
 
      <a href="services.php">Services</a> 
 
     </li> 
 
     <li> 
 
      <a href="notice.php">Notice and Information</a> 
 
     </li> 
 
    </ul> 
 
</li> 
 

 
<li> 
 
    <a href="#">View + </a> 
 
    <ul> 
 
     <li> 
 
      <a href="services.php">Comments</a> 
 
     </li> 
 
     <li> 
 
      <a href="notice.php">Status</a> 
 
     </li> 
 
    </ul> 
 
</li>