单击父时隐藏所有可见的

晚上好

我有ul的forms的ul，li和嵌套下拉菜单的基本结构。我想要做的是，当点击父li时，将显示子ul。当再次点击li时，孩子会隐藏。

所以这就是我到目前为止所做的

$(document).ready(function() { $("ul#glass-buttons li").toggle(function() { $("ul", this).show(); }, function () { $("ul", this).hide(); }); });

它工作得很好，唯一的问题是有多个子下拉菜单。因此当一个人打开并且我点击另一个父李时，两个孩子的ul都保持打开并重叠。任何人都可以推荐最好的方法，当我们不再需要时，我可以隐藏所有可见的ul。

此外，当用户单击文档中的任何位置时，隐藏任何打开的ul的最佳方法是什么？

首先十分感谢。 =]

我无法弄清楚如何用切换来做到这一点。您的需求可能有点太专业，无法有效地使用切换。这是点击。

         top level 1  Sub level 1
 
 
 top level 2  Sub level 2

编辑

变

$（ ‘身体’）点击（hide_sub_navs）;

至

$（窗口）。单击（hide_sub_navs）;

如果页面中没有任何内容，则body标签会变短，您无法单击它。如果您在实际网页上运行旧解决方案，它可能会起作用，因为您可能有其他内容支持正文标记。无论如何，看起来窗口效果更好。

您是否尝试过其他方法来获取您想要隐藏的UL？这些都可能有效：

 $(this).children('ul').hide() $(this).find('ul').hide()

第一个用于UL是LI的直接后代，第二个用于是否可以进一步嵌套。

另外，如果你想要隐藏所有可见的UL（小心，你可以隐藏他们在里面点击的那个），这将匹配所有可见的：

 $('ul:visible')

 $(this).children('ul').hide();

这应该隐藏符合'ul'所有标签，这些标签是$(this)直接子'ul' 。

如果这没有帮助，我们可以看到HTML本身吗？您可能在HTML中有其他内容未完全按照我们的预期设置。

看到你问题的第二部分。

将类分配给导航中的所有子项’ul’标记。在我的例子中，我将使用.dropdown

 $('.dropdown').hide(); $(this).children('.dropdown').show();

这将使用.dropdown类隐藏每个ul ，然后它将显示所有具有.dropdown类的第一级子级。

我认为它有

嵌套在

。

关于如何在外部点击关闭所有可见ul的问题：

 // close list on click outside $('body').click(function() { $('ul:visible').each(function() { $(this).toggle(); }); });

也许你应该在“sub-ul”中添加一个类，这样顶级父级就不会被隐藏。