jQuery Arrays and a Dropdown Menu

Question

I've been looking around and I feel like i'm really jumping a learning curve here and my head is about to explode from searching so much and coming up with nothing.

My problem is that I have a horizontal menu, designed with unordered lists, and to make it a dropdown menu i nested unordered lists in the first unordered list.

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

Now, the nested unordered list is set to "Display:None;".

Since I have all the dropdown lists in the same class, when I try to toggle the 'Display:None;' attribute to 'Display: Block' ALL of the dropdown lists get toggled.

I know I can probably put each of the dropdown lists into their own seperate classes, but is there a way to do this with an array? To be able to click on a top-level list item and bring the appropriate dropdown list.

Thanks for help

user1339920 · Accepted Answer · 2012-06-04 16:02:11Z

2

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

answered Jun 4, 2012 at 16:02

user1339920

Sign up to request clarification or add additional context in comments.

Comments

Samuel Caillerie · Accepted Answer · 2012-06-04 16:08:31Z

0

Something like that:

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

answered Jun 4, 2012 at 16:08

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

Collectives™ on Stack Overflow

jQuery Arrays and a Dropdown Menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related