Jquery 隐藏所有可见的<；ul>；当父母<；李>；点击_Jquery_Document_Hide_Toggle_Show

Jquery 隐藏所有可见的<；ul>；当父母<；李>；点击

jquery

Jquery 隐藏所有可见的<；ul>；当父母<；李>；点击,jquery,document,hide,toggle,show,Jquery,Document,Hide,Toggle,Show,晚上好我已经有了ul、li和ul形式的嵌套下拉菜单的基本结构。我想做的是，当单击父li时，子ul将出现。再次单击li时，子对象ul将隐藏这就是我到目前为止得到的 $(document).ready(function() { $("ul#glass-buttons li").toggle(function() { $("ul", this).show(); }, function () { $("u

晚上好

我已经有了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的最佳方法是什么

事先非常感谢。=]

您是否尝试过其他方法来获得想要隐藏的UL？这两种方法中的任何一种都可能有效：

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

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

第一个用于UL是否是LI的直系后裔，第二个用于if可以进一步嵌套

此外，如果您希望隐藏所有可见的UL（请小心，您可能会隐藏他们在内部单击的UL），这将匹配所有可见的UL：

$('ul:visible')

它应该隐藏所有符合

'ul'

的标记，这些标记是

$（this）

的直接子项

如果这没有帮助，我们可以看到HTML本身吗？您可能在HTML中有其他一些设置与我们期望的不完全一致的内容

看到你问题的第二部分了

为nav中的所有子级“ul”标记分配一个类。在我的示例中，我将使用

.dropdown

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

这将使用

.dropdown

类隐藏每个

ul

，然后它将使用

.dropdown

类显示所有一级子级。

我认为它在

中嵌套了一个

有关如何在单击外部时关闭所有可见ul的问题：
// close list on click outside
$('body').click(function() {
  $('ul:visible').each(function() {
    $(this).toggle();
  });
});

也许你应该在“sub-ul”中添加一个类，这样顶级父级就不会被隐藏。
我不知道如何使用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>


load（“jquery”，“1”）；
函数hide_sub_navs（）{
$（'.top_level ul'）.hide（）.removeClass（“显示”）；
}
$（函数（）{
隐藏子导航（）；
$（“.top_level”）。单击（函数（事件）{
event.stopPropagation（）；
var=这个；
变量子菜单=$（单击）。查找（“ul”）；
if（子菜单.hasClass（“显示”））{
sub_menu.hide（）.removeClass（“显示”）；
}否则{
sub_menu.show（）.addClass（“显示”）；
$（“.top_level”）。每个（函数（）{
var next_li=这个；
如果（单击下一步）{
$（next_li）.find（“ul”）.hide（）.removeClass（“显示”）；
}
});
}
});
$（窗口）。单击（隐藏子导航）；
});

顶级1级

次级1


顶级2级

次级2




编辑
改变
$（“正文”）。单击（隐藏子导航）
到
$（窗口）。单击（隐藏子导航）
如果页面中没有任何内容，则body标记变短，您无法单击它。如果在实际的网页上运行旧的解决方案，它可能会起作用，因为可能会有其他内容支撑body标记。不管怎么说，Windows似乎工作得更好。
从什么时候开始有了父母，你是说反过来吗？：）如果您有多个手册，是否可以通过ID识别它们（仅限单个实例）？glass bottom不应该是类ID，除非它们是嵌套的，这是合法的。@danixd：我很确定OP有嵌套列表。是的，嵌套在中。我会发布HTML，尽管它充满了原始PHP，并且视图源代码也不是特别漂亮。现在看看答案：）传奇人物戴夫！：）乍一看，它很完美，功能齐全。$（'body'）。单击（隐藏导航）；但似乎不起作用。我要去看足球赛了，bbl.）非常感谢。嘿，克里斯蒂安，是的，因为body标签太短，无法点击，因为页面上没有其他内容。我把它切换到$（窗口），现在它可以工作了。
<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>