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

【问题标题】：hide all visible <ul> when parent <li> is clicked单击父 <li> 时隐藏所有可见的 <ul>
【发布时间】：2010-09-07 16:59:08
【问题描述】：

晚上好

我有一个基本的ul、li 结构和ul 形式的嵌套下拉菜单。我想要做的是，当点击父 li 时，子 ul 会出现。再次点击li时，子ul隐藏。

这就是我到目前为止所得到的

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

完美运行，唯一的问题是有多个子下拉菜单。因此，当一个打开并且我单击另一个父 li 时，两个子 ul 都保持打开并重叠。任何人都可以推荐我可以在不再需要时隐藏所有可见 ul 的最佳方法。

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

提前非常感谢。 =]

【问题讨论】：

自从
- 父母，你的意思是反过来吗？ :)
如果您有多个manues，通过ID识别它们是否有效（仅限单个实例）？ glass-bottom 不应该是一个类而不是 ID 吗？？
除非它们是嵌套的，这是合法的。
@danixd：我很确定 OP 有嵌套列表。
是的，
- 中。我会发布 HTML，尽管它充满了原始 PHP，而且视图源代码也不是特别漂亮。现在看答案:)

标签： jquery document hide toggle show

【解决方案1】：

我不知道如何使用切换来做到这一点。您的需求可能有点过于专业，无法有效使用切换。点击这里。

<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').click(hide_sub_navs);

到

$(window).click(hide_sub_navs);

如果页面中没有任何内容，则正文标签会变短，您无法单击它。如果您在实际网页上运行旧解决方案，它可能会起作用，因为您可能会有其他内容支持 body 标签。无论如何，看起来window效果更好。

【讨论】：

传奇戴夫！ :) 乍一看，它是完美的，而且功能齐全。 $('body').click(hide_sub_navs);似乎没有工作。我要去观看足球比赛了，bbl。 :) 谢谢一百万。
嘿克里斯蒂安，是的，这是因为 body 标签太短而无法点击，因为页面上没有任何其他内容。我将它切换到 $(window)，现在它可以工作了。

【解决方案2】：

您是否尝试过其他方法来获取您想要隐藏的 UL？这些都可以工作：

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

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

第一个表示 UL 是否是 LI 的直接后代，第二个表示是否可以进一步嵌套。

另外，如果你想隐藏所有可见的 UL（小心，你可能会隐藏他们在里面点击的那个），这将匹配所有可见的：

$('ul:visible')

【讨论】：

【解决方案3】：

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

这应该隐藏所有符合'ul' 且是$(this) 的直接子级的标签。

如果这没有帮助，我们可以查看 HTML 本身吗？您的 HTML 中可能还有其他内容与我们预期的不完全一致。

看到你问题的第二部分。

为导航中的所有子“ul”标签分配一个类。在我的示例中，我将使用.dropdown

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

这将使用.dropdown 类隐藏每个ul，然后它将显示所有具有.dropdown 类的第一级子级。

【讨论】：

【解决方案4】：

我认为它有一个 <ul> 嵌套在 <li> 内。

关于如何在外部点击关闭所有可见 ul 的问题：

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

也许你应该向“sub-ul”添加一个类，这样上父级就不会被隐藏。

【讨论】：