Comment montrer seulement l'enfant de li et cacher l'autre enfant li

Question

J'ai plus d'un ul imbriqué dans ma page. Nested ul est affiché via le code jquery suivant.

Jquery

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

Mais je veux montrer une seule ul imbriquée à un moment donné. Je veux dire quand je clique sur un li, il devrait afficher son enfant ul et cacher d'autres enfants ul. J'ai ajouté la ligne suivante dans mon précédent code jquery

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

mais cela ne fonctionne pas.

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

essayer ce code

$("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>