Attiva o disattiva la visualizzazione di un sottomenu ul solo se li genitore viene cliccato

Question

Ho guardato attraverso alcune delle altre domande su questo sito che ho pensato che potrebbe aiutare, come this one e this one, ma non sembrano rispondere alla mia domanda . Quello che ho è il seguente:

$(document).ready(function() { 
 
\t $(".has-submenu ul").hide(); 
 
    $(".has-submenu").click(function() { 
 
    \t $(this).children("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Come si può vedere da questo frammento di codice, il sottomenu si nasconde indipendentemente dal fatto che faccio clic su "Articolo 2" o "Voce secondaria 1". Mi rendo conto che questo è dovuto al fatto che "Sottotitolo 1" fa parte dello <li class="has-submenu">, quindi ovviamente una volta cliccato passa e passa al sottomenu. Il CSS sta facendo quello che dovrebbe fare, io non so come modificare il CSS per dire "Nascondi il sottomenu solo se è stato fatto clic sul genitore li. Ho provato a modificare la funzione JQuery click per cercare lo $(".has-submenu a") per specificare che dovrebbe farlo solo se tale elemento specifico è stato cliccato, ma questo non sembra aiutare.

sono sicuro che è una soluzione semplice, solo che non so come fare. Grazie!

Answer 1

è possibile utilizzare $(".has-submenu > a") per fare clic per selezionare a che è figlio diretto di .has-submenu solo e quindi utilizzare next() per indirizzare ul

$(".has-submenu ul").hide(); 
 
$(".has-submenu > a").click(function() { 
 
    $(this).next("ul").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

È necessario cambiare la selettore per $(".has-submenu>a") e cambiarne lo .siblings("ul") al clic.

$(document).ready(function() { 
 
    $(".has-submenu ul").hide(); 
 
    $(".has-submenu>a").click(function() { 
 
    $(this).siblings("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 3

Questo funziona anche se .has-submenu ha più di un elemento.

$(".has-submenu ul").hide(); 
 
$(".has-submenu > a").click(function() { 
 
    $(this).parent().find('ul').each(function(){$(this).toggle();}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li class="has-submenu"><a href="#">Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
    </ul> 
 
    <ul> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>