javascript - JQuery 一次显示一个菜单项

Question

我有一个包含两个菜单项的菜单，我想在用户单击菜单项时使用 JQuery 显示每个菜单项的子菜单。

两个子菜单都会显示(其中 class="dropdown-content")。如何修改我的代码以仅显示子菜单 在单击的菜单项下。有什么方法可以做到这一点而不必指定 id 吗？

下面是我的菜单:

    $('.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

你需要使用children()函数来切换特定DOM的 child

所以使用 $(this).children("ul").toggle(); 来完成你正在寻找的东西

$('.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>