当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？

Question

我有一个 Bootstrap 导航栏，当点击/单击切换按钮时，它会在收缩时折叠并作为菜单下拉。但是，一旦打开，它就会保持打开状态，直到再次单击切换按钮。当用户 A) 在菜单区域外单击，并且 B) 在移动设备上向上或向下滚动页面时，有什么方法可以自动关闭它？以下是导航栏折叠后的样子：

这是下拉菜单：

单击黄色区域或任何菜单项（搜索框除外）时，我需要折叠下拉菜单。到目前为止，我的 JS 看起来是这样的：

// prevent search box from vanishing upon click in responsive mode
$('input.form-control').click(function(e) { e.stopPropagation(); });

// re-collapse nav dropdown menu after selection (in responsive mode)
    $('.navbar-fixed-top').click('li', function() {
        $('.navbar-collapse').collapse('hide');
    });


// close drop-down nav when user clicks outside
    $(document).ready(function () {
        function CloseNav() {
            $(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
            $(".navbar-toggle").stop().removeClass('collapsed');
        }

        $('html').click(function (event) {
            var clickover = $(event.target);
            var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
            if (_opened === true && !clickover.hasClass("navbar-toggle")) {
                CloseNav();
            }

        });
    });

这里是相关的 HTML sn-p:

<!-- Nav bar -->
    <div class="navbar navbar-default navbar-fixed-top top-nav" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="bootstrap/img/gray_logo.png" class="site-logo"><span class="site-name-first">Always</span><span class="site-name-second">Spanish</span></a>
        </div>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" ng-controller="HeaderController">
          <!-- Search box start --> 
            <form class="navbar-form navbar-right search-box" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
              </div>
            </form>
            <!-- Search box start -->
            <ul class="nav navbar-nav pull-right">
                <li ng-class="{ active: isActive('/about')}"><a href="#about">About</a></li>
                <li ng-class="{ active: isActive('/blog')}"><a href="#blog">Blog</a></li>
                <li><a href="#">Premium</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="javascript:;" data-target="#contact" data-toggle="modal">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>

在 3 个 JS 脚本中，前两个似乎运行良好。这只是最后一个没有。另外，我还不知道如何处理滚动事件。我确信我在这里做了一些非常愚蠢的事情。请帮忙！

Answer 1

监听窗口上的所有点击并检查这里是否没有带有导航栏类的父级。你可以使用closest https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Polyfill：https://github.com/jonathantneal/closest