現在のliの子のみを表示し、他のliの子を隠す方法

Question

私のページに複数の入れ子のulがあります。ネストされたulは、次のjqueryコードによって表示されます。

のjQuery

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

しかし、私は一度に一つだけのネストされたULを示したいと思います。私は1つのliをクリックすると、その子の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>

このコードを試してみてくださいあなたを助けるために喜ん