Question

晚上好

我有ul的形式的ul，li和嵌套下拉菜单的基本结构。我想要做的是，当点击父li时，将显示子ul。当再次点击li时，孩子会隐藏。

所以这就是我到目前为止所拥有的

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

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

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

非常感谢提前。 =]

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

修改

更改

$（ '主体'）点击（hide_sub_navs）;

到

$（窗口）。单击（hide_sub_navs）;

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

Answer 2

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

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

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

如果UL是LI的直接后代，则第一个，如果它们可以进一步嵌套，则为第二个。

此外，如果你想要隐藏所有可见的UL（小心，你可以隐藏它们在里面点击的那个），这将匹配所有可见的：

$('ul:visible')

Answer 3

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

这应该隐藏符合'ul' $(this)的直接子项的所有标记。

如果这没有帮助，我们可以看到HTML本身吗？您可能在HTML中有其他内容未完全按照我们的预期设置。

看到问题的第二部分。

为导航中的所有子项'ul'标记指定一个类。在我的示例中，我将使用.dropdown

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

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

Answer 4

我认为<ul>嵌套在<li>内。{/ p>

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

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

也许您应该将一个类添加到“sub-ul”中，以便顶级父级不会被隐藏。

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

4 个答案: