如何僅顯示當前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>