在 Bootstrap 4 中单击外部时关闭打开的折叠导航栏

Question

我目前正在使用 Bootstrap 4，我想在点击外部时关闭折叠的导航栏。它只能在您单击切换按钮时关闭。

此外，当我单击切换按钮时，导航 links 出现问题。打开后，nav-links 会弹起来。我无法找出原因。请有人帮我解决我的问题。谢谢！

这是我的代码：

<body>
 <!--  start navbar -->
 <nav class="navbar navbar-light bg-faded navbar-fixed-top">
  <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#"></a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section-contact">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#resume">Resume</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--   end navbar -->
</body>

这是我的代码笔link：

http://codepen.io/marcvs/pen/jVONGM

Answer 1

这是您问题的解决方案：

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".collapse").hasClass("collapse in");

        if (_opened === true && !clickover.hasClass("navbar-toggler")) {
            $("button.navbar-toggler").click();
        }
    });
});

代码笔：http://codepen.io/anon/pen/xgbmqr

它是 this answer

的修改版本

Answer 2

我知道这是一个老话题，但我只是偶然发现它并认为我可以稍微更新一下解决方案：

$(document).click(event => {
  const isNavbarOpened = $("#navbar.navbar-collapse").hasClass("collapse show");

  // this way, if the navbar is not opened, we don't perform unnecessary operations
  if (isNavbarOpened) {
    const clickedElement = $(event.target);
    const clickedInsideNavbar = clickedElement.closest('nav.navbar').length > 0;

    if (!clickedInsideNavbar) {
      $("button.navbar-toggler").click();
    }
  }
});

在 Bootstrap 4 中单击外部时关闭打开的折叠导航栏

Closing an open collapsed navbar when clicking outside in Booststrap 4

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4