jQuery Масиви в меню - jquery, масиви, список

Я використовую подібну структуру HTML

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

З jQuery, як це

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

За винятком того, що після натискання на одне посилання доведетьсяу спадному списку, коли я натискаю на іншу посилання верхнього рівня, щоб збити інший випадаючий, перший випадаючий не зникає. самі?

Спасибі заздалегідь

Відповіді:

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

Цей метод не має статусу громадянина і кожного разу встановлюватиме правильні умови. За допомогою перемикання ви ризикуєте робити такі речі $("ul.dropdown").toggle(); викликаючи всі випадаючі списки одночасно.

Використовуйте його як

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

А якщо ви клацнете на вже відкритому випадаючому списку, то спочатку приховатимете, а потім знову з'явиться. щоб уникнути подібних змін

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

Спочатку можна сховати будь-який видимий випадаючий список. Потім ви йдете вперед і показуєте, що ви зараз натискаєте.

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

Сподіваюся, що це те, що ви хочете.