Закрытие открытой свернутой панели навигации при щелчке снаружи в Booststrap 4

В настоящее время я использую Bootstrap 4, и я хотел бы закрыть свернутую панель навигации при нажатии снаружи. Он может быть закрыт только при нажатии кнопки-переключателя.

Кроме того, когда я нажимаю кнопку переключения, возникает проблема с навигационными ссылками. После его открытия появляются навигационные ссылки. Я не могу понять причину. Пожалуйста, помогите мне с моей проблемой. Спасибо!

Вот мой код:

<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>

Вот моя ссылка на код:

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


twitter-bootstrap bootstrap-4 twitter-bootstrap-4
person marcvs    schedule 05.01.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вот решение вашей проблемы:

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

Codepen: http://codepen.io/anon/pen/xgbmqr

Это модифицированная версия этого ответа

person DokiCRO    schedule 05.01.2017
comment
Большое вам спасибо за вашу помощь. Вы видели навигационные ссылки? У меня проблема при открытии свернутой навигации, все ссылки отскакивают. - person marcvs; 06.01.2017
comment
Извините, но у меня сейчас нет времени отладить это, но вы можете взглянуть на v4-alpha.getbootstrap.com/components/navbar/, и я думаю, у вас возникнут проблемы, попробуйте скопировать и вставить все, а затем снова постепенно редактировать код ... - person DokiCRO; 06.01.2017
comment
Нет проблем, еще раз спасибо за вашу помощь :) Я ценю - person marcvs; 06.01.2017

arrow_upward
0
arrow_downward

Я знаю, что это старая тема, но я просто наткнулся на нее и решил, что могу немного обновить решение:

$(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();
    }
  }
});
person wisnia    schedule 09.08.2020