在菜单外单击时，如何关闭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

不是隐藏应用，而是单击切换类并将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>

​

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

说明：

如果navbar-toggler按钮的aria-expanded属性为false，即navbar已折叠，则不执行任何操作。

如果导航栏切换按钮的aria-expanded属性为true，那么在关闭导航栏之前，我们必须检查单击是在导航栏上还是在导航栏外进行的，这可以通过检查单击目标的祖先是否包含navbar类来轻松验证。

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

因此，如果导航栏-切换器按钮的aria-expanded属性为true (导航栏没有折叠)，并且clickOver.closest('.navbar').length返回0 (单击-目标元素没有带有navbar类的祖先)，则通过单击导航栏-切换器按钮来折叠导航栏，否则，什么也不做。