Question

当前，我在Bootstrap 4.1.3中使用.js作为粘性导航栏，该导航栏可以按需工作。我试图在脚本中插入一个函数，如果您在菜单外单击，这会使导航栏在手机上折叠。但是，没有运气。 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');
            });
          }
        });

谢谢。

Answer 1

根据您的代码，尝试以下操作：

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

单击外部菜单时，将代码添加到现有.js中以折叠导航栏

1 个答案: