当使用 Click 打开另一个菜单时，如何关闭一个菜单？

Question

在我为我的问题尝试了大多数其他相关搜索结果但没有任何工作后，我将尝试发布我自己的问题。

这就像一个魅力，通过在网站主菜单中打开隐藏的子菜单来实现。 问题是，如果我打开总共四个子菜单中的一个，然后打开另一个子菜单，那么这些子菜单就会相互叠加。 我希望一次只打开一个菜单项的子菜单，这意味着如果我打开一个子菜单，之前打开的子菜单应该关闭。

 jQuery(document).ready(function($) { $(".clickSlide > ul").hide(); $(".clickSlide").click(function() { $(this).children("ul").stop(true, true).slideToggle("fast"), $(this).toggleClass("dropdown-active"); }); });

 <ul id="menu-sidhuvud-e-butik-vanster" class="menu"> <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li> <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li> <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有什么建议么？ 我对JS很陌生。

感谢您的任何指导。

Answer 1

您已经有了如何在代码中执行此操作的公式。 您只需要确保在所有其他未单击的元素上都使用 toggle.hide() function。

$(this).siblings().children("ul").hide("fast")

上面的行正是这样做的。 它选择所有的兄弟姐妹并隐藏他们的 ul 标签的孩子。

 jQuery(document).ready(function ($) { $(".clickSlide > ul").hide(); $(".clickSlide").click(function () { $(this).siblings().children("ul").hide("fast") $(this).children("ul").stop(true, true).slideToggle("fast"), $(this).toggleClass("dropdown-active"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu-sidhuvud-e-butik-vanster" class="menu"> <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li> <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li> <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a> <ul class="sub-menu" style="display: none;"> <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a> <ul class="sub-menu"> <li class="menu-item-1948"><a href="#">Link object</a></li> <li class="menu-item-2224"><a href="#">Link object</a></li> </ul> </li> </ul> </li>