Question

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

会显示两个子菜单（其中class =＆＃34; dropdown-content＆＃34;）。如何修改我的代码只显示子菜单单击菜单项下。有没有办法做到这一点，而无需指定id？

以下是我的菜单：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要使用children()函数来切换特定DOM的子项

所以使用$(this).children("ul").toggle();来完成你想要的东西

＆＃13;

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

＆＃13;

.dropdown-content{
display:none;
}

＆＃13;

<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>

＆＃13;

Answer 2

主要问题是你应该使用this来识别你正在使用的li，然后使用find()沿着DOM元素的后代向下遍历。

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

JQuery一次显示一个菜单项

2 个答案: