隐藏所有可见的< ul>当父级< li>被点击 [英] hide all visible <ul> when parent <li> is clicked
问题描述
晚上好
我有ul，li的基本结构以及以ul形式的嵌套下拉菜单.我想做的是，当单击父li时，子ul将出现.再次单击li时，子ul会隐藏.
I've got a basic structure of ul, li and nested drop-down menus in the form of ul's. What I'm trying to do is that when the parent li is clicked, the child ul will show up. When the li is clicked again, the child ul hides.
这就是我到目前为止所得到的
So this is what I've got so far
$(document).ready(function() {
$("ul#glass-buttons li").toggle(function() {
$("ul", this).show();
},
function () {
$("ul", this).hide();
});
});
它运行完美，唯一的问题是有多个子下拉菜单.因此，当一个孩子打开并且我单击另一个父母li时，两个孩子ul都保持打开并且重叠.任何人都可以推荐最好的方法，以在不再需要它们时隐藏所有可见的ul.
It works perfectly, the only problem is that there are multiple child drop-down menus. So when one is open and I click another parent li, both child ul's remain open and overlap. Can anyone recommend the best way I can hide all visible ul's when they're no longer required.
此外，当用户单击文档中的任意位置时，隐藏任何打开的ul的最佳方法是什么?
Additionally, what would be the best way to hiding any open ul when the user clicks anywhere in the document?
非常感谢. =]
推荐答案
我不知道如何使用切换.您的需求可能过于专业化，无法有效使用切换功能.点击即可完成.
I couldn't figure out how to do it with toggle. Your needs may be a bit too specialized for you to use toggle effectively. Here it is with click.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<script>
function hide_sub_navs() {
$('.top_level ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".top_level").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".top_level").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});
</script>
</head>
<body>
<ul>
<li class="top_level">top level 1
<ul>
<li>Sub level 1</li>
</ul>
</li>
<li class="top_level">top level 2
<ul>
<li>Sub level 2</li>
</ul>
</li>
</ul>
</body>
</html>
修改
已更改
$('body').click(hide_sub_navs);
$('body').click(hide_sub_navs);
到
$(window).click(hide_sub_navs);
$(window).click(hide_sub_navs);
如果页面中没有任何内容，则body标签会变短，并且您无法单击它.如果您在实际的网页上运行旧的解决方案，则可能会起作用，因为您可能还有其他内容可以支撑body标签.无论如何，看起来窗口效果更好.
If You don't have any content in the page then the body tag gets short and you can't click on it. If you ran the old solution on an actual web page it would probably work because you'd probably have other content propping the body tag up. Anyway, it looks like window works better.
这篇关于隐藏所有可见的< ul>当父级< li>被点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
