CODEWITHSUNDEEP
javascriptjquerycss
Coding Duchess
Coding Duchess

Reputation: 6919

JQuery display menu items one at a time

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>

Upvotes: 0

Views: 588

Answers (2)

Shankar
Shankar

Reputation: 3088

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>

Upvotes: 1

SilverSurfer
SilverSurfer

Reputation: 4366

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>

Upvotes: 1

Related Questions