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

标签： jquery document hide toggle show

4条回答

虎瘦雄心在

2楼-- · 2019-09-04 03:24

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

0人赞添加讨论(0) 举报

beautiful°

3楼-- · 2019-09-04 03:40

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

0人赞添加讨论(0) 举报

【Aperson】

4楼-- · 2019-09-04 03:43

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.

0人赞添加讨论(0) 举报

你好瞎i

5楼-- · 2019-09-04 03:47

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

$(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人赞添加讨论(0) 举报

hide all visible when parent is clicked

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

hide all visible
when parent
is clicked