代码之家 › 专栏 › 技术社区 › Christian

单击父级<li>时隐藏所有可见的<ul>

show toggle hide document jquery

Christian · 技术社区 · 16 年前

我已经有了ul,li的基本结构和ul形式的嵌套下拉菜单。我想做的是,当父li被单击时,子ul就会出现。再次单击li时,子ul将隐藏。

这就是我目前掌握的情况

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

此外,当用户单击文档中的任何位置时,隐藏任何打开的ul的最佳方法是什么?

非常感谢。=]

4 回复 | 直到 16 年前

Dave Aaron Smith 16 年前

我不知道怎么用拨动开关。您的需求可能有点过于专业化,无法有效地使用toggle。这里是点击。

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

编辑

$('body')。单击(隐藏子导航);

到

$(窗口)。单击(隐藏子导航);

如果页面中没有任何内容,那么body标签就会变短,您不能单击它。如果您在实际的网页上运行旧的解决方案,它可能会起作用,因为您可能会有其他内容支撑body标记。不管怎样,窗户看起来效果更好。

g.d.d.c 16 年前

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

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

第一个表示UL是否是LI的直系后代,第二个表示它们是否可以进一步嵌套。

此外,如果您希望隐藏所有可见的UL(请小心,您可能会隐藏他们在内部单击的UL),这将匹配所有可见的UL:

$('ul:visible')

Jeff Rupert 16 年前

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

应该隐藏所有符合 'ul' 是他们的直系子女 $(this)

我看到你问题的第二部分了。

.dropdown

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

ul 与 .下拉列表 类,然后它将显示所有一级儿童与班级。

sled 16 年前

我想它有一个 <ul> <li> .

对于如何在单击外部时关闭所有可见的ul的问题:

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

也许你应该给“sub ul”添加一个类,这样顶级父级就不会被隐藏。