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

Question

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

我已经尝试了一些针对 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>

Answer 1

如果你使用 Bootstrap 4，试试这个 JQuery

而不是隐藏应用点击toggler$(".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();
         }
     });
 });

$(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();
        }
    });
});

Answer 2

以下 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-expandednavbar-toggler 按钮的属性是true，那么在关闭导航栏之前，我们必须检查单击是否是在导航栏上或其外部进行的，这可以通过检查单击目标的任何祖先是否包含navbar类来轻松验证。

如果点击目标元素（进行点击的元素）的任何祖先包含navbar类，则将clickOver.closest('.navbar').length返回1，否则将返回0。

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