Добавление кода в существующие .js, чтобы свернуть панель навигации при щелчке вне меню - PullRequest
Новая
       25

Добавление кода в существующие .js, чтобы свернуть панель навигации при щелчке вне меню

0 голосов
/ 08 марта 2019

В настоящее время я использую .js для моей липкой навигационной панели в Bootstrap 4.1.3, которая работает как нужно. Я попытался вставить функцию в скрипт, которая заставляет панель навигации на мобильных телефонах падать, если вы щелкаете за пределами меню. Однако без удачи. https://biogenity.com/RC19/index.html

Код, который я сейчас использую: 

        $(document).ready(function () {
            var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
                var stickyHeight = sticky.outerHeight();
                var stickyTop = stickyWrapper.offset().top;
                if (scrollElement.scrollTop() >= stickyTop) {
                    stickyWrapper.height(stickyHeight);
                    sticky.addClass("is-sticky");
                }
                else {
                    sticky.removeClass("is-sticky");
                    stickyWrapper.height('auto');
                }
            };

            $('[data-toggle="sticky-onscroll"]').each(function () {
                var sticky = $(this);
                var stickyWrapper = $('<div>').addClass('sticky-wrapper'); 
                sticky.before(stickyWrapper);
                sticky.addClass('sticky');

                $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
                    stickyToggle(sticky, stickyWrapper, $(this));
                });

                stickyToggle(sticky, stickyWrapper, $(window));
            });             
        });

Я хочу иметь возможность реализовать функцию, аналогичную следующей. Нет уверенности в том, что это лучшее решение для «сворачивания при нажатии за пределами меню». 

        $(document).on('click', function(event){
          var $clickedOn = $(event.target),
              $collapsableItems = $('.collapse'),
              isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
              isLink = ($clickedOn.closest('a').length == 1),
              isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);

          if( (!isToggleButton && isLink) || isOutsideNavbar ) {
            $collapsableItems.each(function(){
              $(this).collapse('hide');
            });
          }
        });

Заранее спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

На основании вашего кода попробуйте это: 

$(document).click(function (event) {
  var clickedOn = $(event.target),
    isNavbar = clickedOn.hasClass('navbar'),
    // Target only nav links not all links
    isNavbarLink = clickedOn.closest('.nav-link').length == 1,
    navbarCollapse = $('.navbar-collapse'),
    isNavbarOpen = navbarCollapse.hasClass('show');

  // if its not navbar and navbar is opened
  if (!isNavbar && isNavbarOpen) {
    // if the user is not cliking on the nav links
    if (!isNavbarLink) {
      // thes close the navbar 
      navbarCollapse.collapse('hide');
    }
  }
});
...