Przełącz wyświetlanie podmenu tylko wtedy, gdy kliknięto nadrzędny li

Question

Przejrzałem kilka innych pytań na tej stronie, które według mnie mogłyby pomóc, np. this one i this one, ale nie odpowiadają na moje pytanie . To, co mam jest następujące:

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

Jak widać z tego fragmentu, podmenu jest ukryta, niezależnie od tego, czy kliknę „pkt 2” lub „Sub pkt 1”. Zdaję sobie z tego sprawę, ponieważ "Sub Item 1" jest częścią <li class="has-submenu">, więc oczywiście po kliknięciu przechodzi i przełącza podmenu. CSS robi to, co powinien robić, po prostu nie wiem, jak poprawić CSS, aby powiedzieć "Ukryj tylko podmenu, jeśli został kliknięty rodzic li. Próbowałem zmodyfikować funkcję JQuery click, aby wyszukać $(".has-submenu a"), aby określić, że powinien zrobić tylko, że jeśli to specyficzny element został kliknięty, ale nie wydaje się, aby pomóc.

Jestem pewien, że to łatwo naprawić, po prostu nie wiem jak to zrobić. Dzięki!

Answer 1

można użyć $(".has-submenu > a") dla kliknij, aby zaznaczyć, że jest bezpośredni a dzieckiem .has-submenu tylko, a następnie użyć next() kierować 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

Musisz zmienić wybieraka $(".has-submenu>a") i przełączyć swój .siblings("ul") na kliknięcia.

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

To działa nawet jeśli .has-submenu ma więcej niż jedną pozycję.

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