Tableaux jQuery sur un menu - jquery, tableaux, liste

J'utilise une structure HTML similaire à celle-ci

<ul class="top-level">
<li><a href="#"></a>
<ul class="dropdown">
<li><a href="#"></a>
</li>
<ul>
<li>
</ul>

Avec jQuery comme ça

$(".top-level").on("click", "a", function() {
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

Sauf qu'après avoir cliqué sur un lien pour amenerDans un menu déroulant, lorsque je clique sur un autre lien de niveau supérieur pour créer un autre menu déroulant, le premier menu déroulant ne disparaît pas. Existe-t-il un moyen de sélectionner tous les autres éléments dans .dropdown sauf celui que je veux et de leur demander de se cacher? se?

Merci d'avance

Réponses:

$(".top-level").on("click", "a", function() {
var theDrop = $(this).next("ul.dropdown"); //convert dropdown in question to var
theDropState = theDrop.is(":visible"); //record current state of dropdown
$("ul.dropdown").hide(); //hide all dropdowns
if(!theDropState){ theDrop.show(); } //if state was invisible, show dropdown
});

Cette méthode est sans état et établira les conditions correctes à chaque fois. En utilisant la bascule, vous risquez de faire des choses comme $("ul.dropdown").toggle(); provoquant l'affichage de toutes les listes déroulantes à la fois.

Utilisez-le comme

$(".top-level").on("click", "a", function(e) {
e.preventDefault();
$("ul.dropdown").hide();
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

Et si vous cliquez sur une liste déroulante déjà ouverte, celle-ci sera d'abord masquée puis réapparue. pour éviter que le modifier comme

$(".top-level").on("click", "a", function(e) {
e.preventDefault();
if($(this).next("ul.dropdown").is("visible"))
return;
// as the target drop down is already visible do nothing and return
$("ul.dropdown").hide();
$(this).next("ul.dropdown").toggle();
// Show / hide the corresponding sub-menu
});

Vous pouvez d'abord masquer toute liste déroulante visible. Ensuite, vous continuez et affichez votre clic.

$(".top-level").on("click", "a", function() {
$("ul.dropdown").fadeOut(100); //hide any visible drop down first
$(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

J'espère que c'est ce que vous voulez.