隐藏所有可见的
;当父级
时被点击

发布于 2024-09-18 14:25:09 字数 518 浏览 11 评论 0原文

晚上好，

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

预先非常感谢。 =]

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗弃Ｍ 2024-09-25 14:25:09

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

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

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

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

居里长安 2024-09-25 14:25:09

您是否尝试过其他方法来获取您想要隐藏的 UL？其中任何一个都可以工作：

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

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

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

此外，如果您想要隐藏所有可见的 UL（请小心，您可能会隐藏他们在其中单击的 UL），这将匹配所有可见的 UL：

$('ul:visible')

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

甜中书 2024-09-25 14:25:09

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

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

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

看到你问题的第二部分。

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

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

这将隐藏带有 .dropdown 类的每个 ul ，然后它将首先显示所有内容 -使用 .dropdown 类对子级进行级别设置。

$(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 原文

笔芯 2024-09-25 14:25:09

我认为它有一个

内。

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

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

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

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

0 评论

24 人气

关注发私信

友情链接

文江博客

隐藏所有可见的
;当父级
时被点击

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

隐藏所有可见的;当父级时被点击

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

隐藏所有可见的
;当父级
时被点击

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。