Geek Answers Handbook

Hide all visible <ul> when clicking on parent <li>

good evening

I have the basic structure of ul, li and nested dropdown menus in the form of ul. What I'm trying to do is that when a parent is clicked, a child ul will appear. When li clicks again, the ul child is hiding.

So that's what I still have

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

It works great, the only problem is that there are several drop-down menus for children. Therefore, when one of them is open, and I press the other parent li, both child ul remain open and overlap. Can anyone recommend a better way to hide the entire visible street when they are no longer needed.

Also, what would be the best way to hide any open street when the user clicks anywhere in the document?

Thank you very well in advance. =]

0
jquery document hide toggle show
source share
4 answers

I could not figure out how to do this with the switch. Your needs may be too specialized for you to switch efficiently. Here he is with a 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

Modified

$ ('body') click (hide_sub_navs).

to

$ (window) .click (hide_sub_navs);

If you do not have content on the page, the tag tag becomes short and you cannot click it. If you ran the old solution on a real web page, this will probably work, because you are likely to have other content that supports body tags. Anyway, the window seems to work better.

+1
source share

Have you tried alternative ways to get the UL you want to hide? Any of them can work:

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

The first, if UL is a direct descendant of LI, the second for, if they can be nested further.

In addition, if you want to hide all visible UL (be careful, you can hide the one that they clicked inside), this will match all visible:

 $('ul:visible')
0
source share
 $(this).children('ul').hide();

This should hide all tags that match 'ul' , which are direct children of $(this) .

If this does not help, can we see the HTML itself? You may have something else in the HTML that is not configured exactly as we expect.

I saw the second part of your question.

Assign a class to all child 'ul' tags that you have on nav. In my example, I am using .dropdown

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

This will hide EVERY ul with the class .dropdown , and then display all first-level children with the class .dropdown .

0
source share

I think it has a <ul> nested inside an <li> .

When asked how to close all visible ul on a click outside:

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

perhaps you should add a class to "sub-ul" so that the top parent does not hide.

0
source share

More articles:


All Articles