如何在单击菜单外部时关闭Bootstrap 4导航栏折叠菜单？

Question

如何在单击菜单外部时关闭Bootstrap 4导航栏折叠菜单？

twitter-bootstrapnavbarbootstrap-4twitter-bootstrap-4

4

这个导航栏在所有浏览器尺寸下都是折叠的。我想知道如何在菜单外点击时关闭已展开的菜单，以便切换按钮不是唯一关闭它的方式。

我尝试了一些针对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 class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a>
                      <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>

            <script>
            $(document).click(function (event) {
                var clickover = $(event.target);
                var $navbar = $(".navbar-collapse");               
                var _opened = $navbar.hasClass("in");
                if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
                    $navbar.collapse('hide');
                }
            });
            </script>

- CADesigner

4个回答

5

以下jQuery代码对我来说可行:

```

以下jQuery代码对我来说可行:

```

// Close Navbar when clicked outside
$(window).on('click', function(event){
    // element over which click was made
    var clickOver = $(event.target)
    if ($('.navbar .navbar-toggler').attr('aria-expanded') == 'true' && clickOver.closest('.navbar').length === 0) {
        // Click on navbar toggler button
        $('button[aria-expanded="true"]').click();
    }
});

说明：

如果导航栏切换按钮的aria-expanded属性值为false，即导航栏已经折叠，则不需要执行任何操作。

如果导航栏切换按钮的aria-expanded属性值为true，那么在关闭导航栏之前，我们必须检查点击事件是在导航栏内部还是外部发生的，这可以通过检查点击目标的任何祖先元素是否包含navbar类来轻松验证。

因此，如果点击目标元素的任何祖先元素（即鼠标点击位置所在的元素）包含navbar类，则clickOver.closest('.navbar').length将返回1，否则将返回0。

因此，如果导航栏切换按钮的aria-expanded属性值为true（导航栏未折叠），并且clickOver.closest('.navbar').length返回0（点击目标元素没有包含navbar类的祖先元素），则通过单击导航栏切换按钮折叠导航栏，否则不执行任何操作。

- Priyansh Garg

最佳答案，就是这个。 - Abbys

1

如我在这里所提到的，你可以使用纯JavaScript来检查被点击的元素是否是同一个导航栏的子元素，并且你想要隐藏的内容（下拉菜单）正在显示。

window.onload = function () {
    document.addEventListener("click", function (event) {
        // if the clicked element isn't child of the navbar, you must close it if is open
        if (!event.target.closest("#navbar_id") && document.getElementById("navbarSupportedContent").classList.contains("show")) {
            document.getElementById("hamburger_menu_button").click();
        }
    });
}

https://jsfiddle.net/j4tgpbxz/

- Douglas Vicentini

0

尝试这个修改过的答案, 在Bootstrap 4.6.2上运行良好。

window.onload = function () {
    if (window.jQuery) {
        $(document).click(function (event) {
            var clickover = $(event.target);
            var _opened = $(".navbar-collapse").hasClass("collapse show");
            if (_opened === true && (!clickover.hasClass("navbar-toggler") || !clickover.hasClass("navbar-toggler-icon"))) {
                $("button.navbar-toggler").click();
            }
        });
    }
}

https://jsfiddle.net/x7kwn8ze/1/

- DimensityDU

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Znaneswar · Accepted Answer

如果您正在使用Bootstrap 4，请尝试使用此JQuery，而不是隐藏应用程序并单击切换器 $(".navbar-toggler").click();，将in替换为show类，并将navbar-toggle更改为navbar-toggler。

 $(document).ready(function () {
     $(document).click(function (event) {
         var clickover = $(event.target);
         var _opened = $(".navbar-collapse").hasClass("show");
         if (_opened === true && !clickover.hasClass("navbar-toggler")) {
             $(".navbar-toggler").click();
         }
     });
 });

工作演示: https://jsfiddle.net/rg43fyhL/

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("show");
        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
            $(".navbar-toggler").click();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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 class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a>
                      <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>