问题
Good evening
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();
});
});
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.
Additionally, what would be the best way to hiding any open ul when the user clicks anywhere in the document?
Thanks very much in advance. =]
回答1:
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>
Edit
Changed
$('body').click(hide_sub_navs);
to
$(window).click(hide_sub_navs);
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.
回答2:
Have you tried alternate ways to get the UL's you want to hide? Either of these may work:
$(this).children('ul').hide()
$(this).find('ul').hide()
The first for if the UL is a direct descendant of the LI, the second for if they may be nested further.
Additionally, if you're looking to hide all visible UL's (be careful, you may hide the one they clicked inside) this will match all visible ones:
$('ul:visible')
回答3:
$(this).children('ul').hide();
That should hide all tags that meet 'ul' that are direct children of $(this).
If that does not help, can we see the HTML itself? You might have something else in the HTML that isn't set up exactly as we expect.
Saw the second part of your question.
Assign a class to all of the children 'ul' tags you have in the nav. In my example, I'll use .dropdown
$('.dropdown').hide();
$(this).children('.dropdown').show();
That will hide EVERY ul with the .dropdown class, and then it will show all first-level children with the .dropdown class.
回答4:
I think it has an <ul> nested inside of a <li>.
To the question how to close all visible ul on a click outside:
// close list on click outside
$('body').click(function() {
$('ul:visible').each(function() {
$(this).toggle();
});
});
maybe you should add a class to "sub-ul" so that the top-parent doesn't get hidden.
来源：https://stackoverflow.com/questions/3660855/hide-all-visible-ul-when-parent-li-is-clicked