相关疑难解决方法(0)

与此问题类似,但更进一步.我想检测一组项目之外的点击,我按以下方式处理:

$('#menu div').live('click', function() {
    // Close other open menu items, if any.
    // Toggle the clicked menu item.

    $('body').one('click', function(event) {
        // Hide the menu item.
        event.stopPropagation();
    });
});

不幸的是,当另一个菜单项打开而另一个菜单项被点击时,这就像一个魅力,它需要两次点击才能打开第二个项目.第一次单击隐藏第一个打开的菜单项,第二个单击显示第二个菜单项.

"正确"行为以下列方式起作用:

• 单击菜单项将打开它.
• 单击相同的菜单项(或其子项)将关闭它.
• 单击另一个菜单项将关闭第一个,打开第二个菜单项.
• 单击(打开)菜单项将关闭它们.

我尝试了以下$('body').one()命令来代替上面的命令忽略菜单项的点击而收效甚微:

// Captures click on menu items in spite of the not.
$('*').not('#menu *').one('click', function() { // Hide menu }
$('*:not(#menu)').one('click', function() { // Hide menu }

一如既往,感谢您的帮助!

对于所有浏览器尺寸，此导航栏都是折叠的。我想知道如何在菜单外单击时关闭展开的菜单。所以切换按钮不是关闭它的唯一方法。

我已经尝试了一些针对 Bootstrap 3 的建议，其中之一是下面包含的 Javascript 代码，但它们似乎不起作用。

说我不太了解 Javascript 或 PHP 可能很有用，但我愿意接受您提出的任何建议。谢谢！

<nav class="navbar navbar-inverse bg-faded">
              <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <span class="navbar-text">&nbsp;</span>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav flex-column">
                  <li class="nav-item active">
                    <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/support-2/">Support</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Legal
                    </a>
                    <div …

我想在用户点击菜单外部时关闭我的菜单,而不仅仅是在navbar元素之外.因为我的菜单中有更多折叠,所以此解决方案对我不起作用:如何在Bootstrap 3中单击导航栏元素外部时关闭打开的折叠导航栏？ 当我在菜单外单击时菜单消失,但是当我点击带有下拉菜单的链接时,整个菜单都会崩溃.

<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="list-group panel">
            <a href="#submenu-1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Webshop</a>
            <ul class="collapse" id="submenu-1">
                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Industriële verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Promotionele verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Gelamineerde verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Enveloppen &verzend verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Medische verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Co-packing</a>
            </ul>
        </li>
    </ul>