隐藏兄弟<ul>s时
隐藏兄弟<ul>s时
提问于 2015-08-10 23:46:45
这应该是难以置信的容易，但经过近一个小时的研究，我还没有找到一个完全符合我的需要的答案。我有一个带有子菜单和子菜单的下拉菜单，我试图对它进行编码，以便当单击一个<li> (显示其子<ul>)时，所有其他兄弟姐妹<ul>的关闭(正如您对任何导航菜单所期望的)。这是我尝试过的代码之一，它没有显示出所期望的行为(兄弟子菜单不会消失)：
HTML:
<ul>
<li><a href="#">Go to first item</a>
<ul>1st item!</ul>
</li>
<li><a href="#">Go to second item</a>
<ul>2nd item!</ul>
</li>
<li><a href="#">Go to third item</a>
<ul>3rd item!</ul>
</li>
</ul>Javascript
$('li').click(function() { $("ul ul:visible").hide(); });请让我知道我的JavaScript是否有问题，因为我对它相当陌生。
编辑:虽然我的JavaScript下面有几个有用的修复程序，但有人提供了一种非常简单的方法，可以在没有任何JavaScript的普通CSS中实现这一点，对于任何有类似问题的人来说，这是一个简单且通用的解决方法，因此我决定将其标记为最佳答案。谢谢大家！
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-10 23:55:50
您可以使用普通CSS来完成这一任务：
ul a:focus ~ ul, ul ul:hover {
display: block;
}
ul ul {
display: none;
}<ul>
<li><a href="#">Go to first item</a>
<ul>1st item!</ul>
</li>
<li><a href="#">Go to second item</a>
<ul>2nd item!</ul>
</li>
<li><a href="#">Go to third item</a>
<ul>3rd item!</ul>
</li>
</ul>
Stack Overflow用户
发布于 2015-08-10 23:52:14
为什么不隐藏所有的ul元素，只显示子ul
$('li').click(function() {
$("ul ul").hide();
$("ul", this).show();
});Stack Overflow用户
发布于 2015-08-10 23:54:14
看来你快到了。您所需要做的就是对当前在单击的ul下的li进行检查并显示它。
$('li').click(function() {
$("ul ul:visible").hide();
$(this).find('ul').show();
});
$(document).mouseup(function(e) {
var container = $('ul');
if( !container.is(e.target) && container.has(e.target).length === 0 ) {
container.find('ul:visible').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Go to first item</a>
<ul>1st item!</ul>
</li>
<li><a href="#">Go to second item</a>
<ul>2nd item!</ul>
</li>
<li><a href="#">Go to third item</a>
<ul>3rd item!</ul>
</li>
</ul>
编辑:我已经更新了代码，包括一个“单击关闭”函数，这样当用户完全在原始parent ul之外单击时，整个菜单就会关闭。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31930945
复制相关文章
相似问题
腾讯云开发者
