Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

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

0 votes
326 views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...