我正在尝试为移动视图创建一个jQuery下拉菜单。我对jQuery还不熟悉，我使用Toggle来隐藏和显示子菜单。我的问题是，当我点击一个菜单项时，其他子菜单不会自动关闭。例如，如果我点击menutwo，我希望menuone自动关闭。我该如何做到这一点？请帮忙。
2
1252jQuery(document).ready(function($) {
$(".menuone").click(function() {
$(".submenuone").toggle(200);
});
$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
});
$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
<li class="menuone"><a href="#">关于我们</a>
<ul class="submenuone">
<li>公司概况</a>
</li>
</ul>
</li>
<li class="menutwo"><a href="#">解决方案</a>
<ul class="submenutwo">
<li>应收账款融资和催收</li>
<li>工人补偿融资></li>
</ul>
</li>
<li class="menuthree"><a href="#">提供者类型</a>
<ul class="submenuthree">
<li>医生</a>
</li>
<li>药房</a>
</li>
</ul>
</li>
</ul>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
Made it finally.
Here is my answer
jQuery(document).ready(function($) { $(".menuone").click(function() { $(".submenuone").toggle(200); $(".submenutwo, .submenuthree").hide(200); // Hide other submenus }); $(".menutwo").click(function() { $(".submenutwo").toggle(200); $(".submenuone, .submenuthree").hide(200); // Hide other submenus }); $(".menuthree").click(function() { $(".submenuthree").toggle(200); $(".submenuone, .submenutwo").hide(200); // Hide other submenus }); });我会使用事件委托，并找到其他的UL并关闭它们。
jQuery(document).ready(function($) { $("#menu-menu").on("click", "> li", function () { $("#menu-menu > li").not(this).find("ul").hide(200); $(this).find("ul").toggle(200); }); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu-menu" class="menu dropdown-menu"> <li class="menuone"><a href="#">关于我们</a> <ul class="submenuone"> <li>公司概况</a> </li> </ul> </li> <li class="menutwo"><a href="#">解决方案</a> <ul class="submenutwo"> <li>应收账款融资和催收</li> <li>工人赔偿融资></li> </ul> </li> <li class="menuthree"><a href="#">供应商类型</a> <ul class="submenuthree"> <li>医生</a> </li> <li>药房</a> </li> </ul> </li> </ul>