Bootstrap 3.3.7 如何点击外部关闭导航栏？答案

【问题标题】：Bootstrap 3.3.7 How to close the navigation bar by clicking outside?Bootstrap 3.3.7 如何点击外部关闭导航栏？
【发布时间】：2019-02-10 19:21:34
【问题描述】：

我有一个带有 Bootstrap 3.3.7 主题的 Drupal 8.6.8 站点

我希望在单击外部时关闭导航菜单。我尝试了代码：

(function ($) {
  'use strict';

  $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-first').length) {
      $('.navbar-collapse-first').collapse('hide');
    }
  });

}(jQuery));

https://css-tricks.com/dangers-stopping-event-propagation/

它不起作用，如果我在导航菜单之外单击，它不会关闭。我希望菜单仅在我单击外部时才关闭。除非正在重新加载页面，否则即使是菜单链接也不应关闭菜单。

这里是导航菜单按钮的代码：

<div id="block-togglenavigationfirst" class="contextual-region">

<button type="button" class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">

  <div class="icon-navbar-first">
    <span class="fa-layers fa-3x">
      <i class="far fa-circle"></i>
      <span class="navbar-icon-open">
        <i class="fas fa-th-list" data-fa-transform="shrink-8"></i>
      </span>
      <span class="navbar-icon-close">
        <i class="fas fa-times" data-fa-transform="shrink-8"></i>
      </span>
    </span>
  </div>

  <div class="icon-navbar-first-alert icon-navbar-first-alert-disable">
    <span class="fa-layers fa-3x">
      <i class="fas fa-circle"></i>
      <span class="navbar-icon-open">
        <i class="fas fa-th-list fa-inverse" data-fa-transform="shrink-8"></i>
      </span>
      <span class="navbar-icon-close">
        <i class="fas fa-times fa-inverse" data-fa-transform="shrink-8"></i>
      </span>
    </span>
  </div>

</button>

</div>

这里是导航菜单：

<div id="navbar-collapse-first" class="navbar-collapse-first width navbar-collapse-first-fixed-top collapse in" aria-expanded="true" style="">
  <div class="region region-navigation-collapsible-first">
    <nav role="navigation" aria-labelledby="block-useraccountmenu-menu" id="block-useraccountmenu" class="contextual-region">
      <h2 class="sr-only" id="block-useraccountmenu-menu">User account menu</h2>          
      <ul class="menu menu--account nav navbar-nav navbar-right">
        <li class="first last">
          <a href="/fr/unmasquerade" title="Retourner sur votre compte utilisateur.">Cesser de se faire passer pour quelqu'un d'autre</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

【问题讨论】：

标签： javascript twitter-bootstrap navigation navbar collapse

【解决方案1】：

您应该检查点击发生在哪里。如果点击在导航栏之外，则切换它，否则不要这样做。

您的 javascript 代码将变为：

(function ($) {
  'use strict';

   $(document).click(function (event) {
       if (!($(event.target).is('#navbar-collapse-first *'))
           $('.navbar-collapse-first').collapse('hide');
   });

}(jQuery));

【讨论】：

我刚刚应用了你的代码，但是当我在外面点击时，它并没有关闭。
我刚刚访问了您的网站，它似乎运行良好。在侧边栏内单击时，它不会隐藏它，当我单击涂黑区域时，它会关闭侧边栏。您能否解释一个不适用于您的网站的案例？

【解决方案2】：

尝试使用 w3schools 的这个解决方案

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close

【讨论】：

谢谢，但您的回答是关于模态的。在我的问题中，它是崩溃