Question

如何在单击导航栏元素外部时关闭打开的折叠导航栏？目前，打开或关闭它的唯一方法是点击navbar-toggle按钮。

有关示例和代码，请参阅here：

到目前为止，我已尝试过以下似乎不起作用的内容：

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

Answer 1

看看：

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

你的小提琴适用于：http://jsfiddle.net/52VtD/5718/

它是this answer的修改版本，缺少动画，也有点复杂。

我知道，调用click()并不是很优雅，但collapse('hide')对我来说也不起作用，我认为动画比添加和删除类几乎没有好处。 / p>

Answer 2

接受的答案似乎无法正常运作。它只需要检查＆＃34; navbar-collapse＆＃34;有＆＃34; in＆＃34;类。然后我们可以通过使用我们对导航栏的引用来按预期触发折叠方法。

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});

Answer 3

我决定使用的解决方案来自此处和this answer

中接受的答案

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

如果用户点击.navbar元素之外的任何位置，则会隐藏打开的折叠导航菜单。当然，点击.navbar-toggle仍可以关闭菜单。

Answer 4

使用它对我有用。

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});

Answer 5

stopPropagation()并非始终是最佳解决方案。而是使用类似的东西：

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});

我认为你永远不想听.navbar中的任何其他事件是危险的。如果您使用stopPropagation()，这是不可能的。

Answer 6

我已经为@ nozzleman的回答添加了一个条件，检查是否已对菜单中的任何元素进行了点击或点击，如果是这样的话，请不要将其折叠

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});

Answer 7

我有一个场景，我有非链接，如果用户在事故中点击这些项目，我不希望关闭面板。即使您单击非链接项目的文本， 中的其他答案也将关闭。

为了解决这个问题，我在保罗塔尔的答案中添加了检查，将检查结果包装在检查中，以确定点击是否发生在

内的任何地方

if ($(event.target).parents(".navbar-collapse").length < 1) { }

完整的代码将成为：

$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
  }
});

在此demo fiddle中，您可以看到，如果您点击面板内部的非链接，则不会将其折叠。

Answer 8

For Bootstrap 4

Bootstrap 4没有in类。这是Coffeescript。

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

基本上，除非您单击按钮或菜单，否则请关闭菜单。

注意：奇怪的是，在iOS上单击文本时不会注册click事件，也不会注册mouseup事件。点击图像会触发事件。

Answer 9

对于Bootstrap 4：

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});

Answer 10

$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});

Answer 11

$(window).click(function (e) {
     if ($(e.target).closest('.codehim-dropdown').length) {
         return;
     }
     if ($(e.target).closest(offCanvas).length) {
         return;
     }

     //check if menu really opened
     if ($(hamburger).hasClass("active")) {
         closeMenu();
     }

     $(dimOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});

Answer 12

已转换的水头工对Bootstrap 4（.3.1）的回答：

I = rgb2gray(im2double(imread('I.jpg')));

G = imguidedfilter(I, 'DegreeOfSmoothing', 0.005);
J = imsharpen(G, 'Amount', 2);

figure;imshow(J)

B = imbilatfilt(I);
K = imsharpen(B, 'Amount', 2);
figure;imshow(K)

放置在ngOnInit（）中。

在加载文档时，此代码等待单击事件。如果移动菜单下拉菜单处于打开状态（即导航栏的可折叠部分具有“显示”类），并且单击的对象（目标）不是移动菜单按钮（即不具有“ navbar-toggler”类），则我们告诉移动菜单按钮已被单击，然后菜单关闭。

Answer 13

以下代码对我有用，优点是在小屏幕上，当您使用.navbar .navbar-expand类单击其nav父级时，它不会隐藏.collapse：

$(document).click(function (e) {  
    if($('.collapse').hasClass('show') && !$('nav').is(e.target) && $('nav').has(e.target).length === 0){
        $('.navbar-toggler').click()
    }
})

Answer 14

我在这里回答一些问题时遇到了一些问题，我还希望能够按需关闭扩展菜单。所以我做了一个简单的函数，模拟点击。

function closeMenu(){
  element = document.getElementById('nav_top');
  if(element){
    if(element.classList.contains('show')){
      document.getElementById('navbar_toggler').dispatchEvent(new CustomEvent('click'));
    }
  }
}
$(document).ready(function () {
  $(document).click(function (event) {
    closeMenu();
  });
});

使用此方法，您可以在外部点击时关闭它，也可以随时从任何其他函数调用 closeMenu()。

如何在Bootstrap 3中单击导航栏元素外部时关闭打开的折叠导航栏？

14 个答案:

For Bootstrap 4