Home/ Questions/Q 1050779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:49:18+00:00

Good evening I’ve got a basic structure of ul, li and nested drop-down menus

  • 0

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. =]

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0