JQuery display menu items one at a time

Question

I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.

What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is under the menu item clicked. Is there any way to do that without having to specify id ?

Below is my menu:

  $('.menu-item').on('click', function() { $('.dropdown-content').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-mobile"> <li class="menu-item"> <img src="images/img1.png"/> <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> <ul id="linksdrop" class="dropdown-content"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </li> <li class="menu-item"> <img src="images/img2.png"/> <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> <ul id="userdrop" class="dropdown-content"> <li><a href="profile.html">My Profile</a></li> <li><a href="logout.html">Log Off</a></li> </ul> </li> </ul> 

Answer 1

you need to use children() function to toggle the children of particular DOM

so use $(this).children("ul").toggle(); to accomplish what you are looking for

 $('.menu-item').on('click', function() { $(this).children("ul").toggle(); }); 

 .dropdown-content{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-mobile"> <li class="menu-item"> <img src="images/img1.png"/> <a class="hide-on-med-and-down white-text" href='#'> <span id="lblLinks">Links</span></a> <ul id="linksdrop" class="dropdown-content"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </li> <li class="menu-item"> <img src="images/img2.png"/> <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> <ul id="userdrop" class="dropdown-content"> <li><a href="profile.html">My Profile</a></li> <li><a href="logout.html">Log Off</a></li> </ul> </li> </ul> 

Answer 2

The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.

 $('.menu-item').on('click', function() { $(this).find(".dropdown-content").toggle(); }); 

 .dropdown-content{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav-mobile"> <li class="menu-item"> <img src="images/img1.png"/> <a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a> <ul id="linksdrop" class="dropdown-content"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </li> <li class="menu-item"> <img src="images/img2.png"/> <a class="hide-on-med-and-down white-text" href='#'><span>User</span></a> <ul id="userdrop" class="dropdown-content"> <li><a href="profile.html">My Profile</a></li> <li><a href="logout.html">Log Off</a></li> </ul> </li> </ul>