jQuery Arrays em um menu - jquery, arrays, list

Eu estou usando uma estrutura HTML semelhante a esta

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

Com jQuery como este

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

Só que depois de clicar em um link para trazerem um menu suspenso, quando eu clico em outro link de nível superior para derrubar outro menu suspenso, o primeiro menu suspenso não desaparece. Existe uma maneira de selecionar todos os outros elementos em .dropdown, exceto o que eu quero e pedir para eles se esconderem si mesmos?

desde já, obrigado

Respostas:

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

Esse método é sem estado e irá configurar as condições corretas todas as vezes. Com o uso de alternar você corre o risco de fazer coisas como $("ul.dropdown").toggle(); fazendo com que todas as listas suspensas sejam exibidas de uma só vez.

Use como

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

E se você clicar em um menu suspenso já aberto, ele primeiro se ocultará e depois aparecerá novamente. para evitar que modificá-lo como

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

Você pode ocultar qualquer lista suspensa visível primeiro. Então você vai em frente e exibir o seu estão clicando atualmente.

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

Espero que seja o que você quer.