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

Posted 2023-05-08

【中文标题】当用户在菜单外单击时，如何关闭 Bootstrap 导航栏下拉菜单？

【英文标题】：How to close the Bootstrap navbar dropdown when the user clicks outside the menu?

【发布时间】：2015-12-03 17:33:23

【问题描述】：

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

【问题讨论】：

***.com/questions/23764863/…的可能重复

@nozzleman：不完全是重复的，因为提供给该问题的答案在我的情况下不起作用。特别是因为我的导航栏中有一个搜索框，而您的回答清楚地承认如果有搜索框，该解决方案将不起作用。

【参考方案1】：

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