jQuery Массивы и раскрывающееся меню

Question

Я оглядывался вокруг, и я чувствую, что я действительно прыгаю с кривой обучения здесь, и моя голова вот-вот взорвется от поиска так много и не придумает ничего.

Моя проблема заключается в том, что у меня есть горизонтальное меню, разработанное с неупорядоченными списками, и чтобы оно было выпадающим меню, я вложенные неупорядоченные списки в первом неупорядоченном списке.

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

Теперь вложенный неупорядоченный список установлен на «Отображать: Нет».

Поскольку у меня есть все выпадающие списки в том же классе, когда я пытаюсь переключить «Дисплей: Нет»; атрибут «Display: Block». Все выпадающие списки переключаются.

Я знаю, что, возможно, я могу поместить каждый из раскрывающихся списков в свои собственные отдельные классы, но есть ли способ сделать это с помощью массива? Чтобы иметь возможность щелкнуть элемент списка верхнего уровня и вывести соответствующий раскрывающийся список.

Спасибо за помощь

Answer 1

$("ul.top-level li").click(function(event) { 
    $(this).find("ul.dropdown").toggle(); 
}); 

Answer 2

Что-то вроде этого:

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