ansaurus

Question

hide all visible <ul> when parent <li> is clicked

Answer 1

A:

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')

g.d.d.c 2010-09-07 17:06:04

Answer 2

A:

$(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.

Jeff Rupert 2010-09-07 17:06:06

Answer 3

A:

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.

sled 2010-09-07 17:10:07

Answer 4

+1 A:

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"&gt;&lt;/script&gt;
    <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.

Dave Aaron Smith 2010-09-07 17:37:47

legend dave! :) At first glance it's perfect and functions without fail. The $('body').click(hide_sub_navs); doesn't appear to be working though. I'm off to watch the footy, bbl. :) Thanks a million.

Christian 2010-09-07 18:29:45

Hey Christian, yeah, it's because the body tag was too short to click on because there wasn't any other content on the page. I switched it to $(window) and now it works.

Dave Aaron Smith 2010-09-07 18:45:19

Top Stuff. Works perfectly, thanks again! :)

Christian 2010-09-07 18:54:13

ansaurus

tags:

views:

answers:

hide all visible <ul> when parent <li> is clicked

related questions