單擊外部引導程序菜單以將其關閉

Question

我嘗試找到在外部（在移動窗口大小下）單擊以關閉引導菜單的解決方案，但無法使其正常工作，而在通過以下代碼單擊“ a”鏈接之一時，它就可以正常工作：

// menu buttons collapses when clicking a link
    $('document').ready(function() 
{
    if ($('a').on('click', function() 
            { 
                $('.collapse, #mainContainer').removeClass('in'); 
                $('.navbar-toggle').toggleClass('collapsed'); // button
            }));
});

但是如何通過單擊菜單導航欄外部來關閉菜單？

這是我的頁面，顯示問題iwebdesign.se

是的，我已經嘗試過了，不能正常工作：

類似的問題

Answer 1

  $(document).on('click',function(){
   $('.collapse').collapse('hide');
});

只需復制代碼並經過您的自定義腳本或index.html

感謝雷米（Remy）在外面單擊以隱藏引導程序切換菜單，關閉（隱藏）它

Answer 2

這里的答案：

   (document).on('click',function(){
   $('.collapse').collapse('hide');
})

希望對您有所幫助:)

雷米

Answer 3

假設您想在菜單外部單擊時（即折疊菜單）與在菜單內部單擊時想做的事情有所不同，那么您可能希望這樣來確定您是在菜單內部還是在菜單外部單擊：

$('body').click(function(event){
  // check if the clicked element is a descendent of navigation 
  if ($(event.target).closest('.navigation').length) {
    return; //do nothing if event target is within the navigation
  } else {
  // do something if the event target is outside the navigation
     // code for collapsing menu here...
  }
});

https://jsfiddle.net/L3qg4pa8/5/大致顯示了這個概念。

當然，您需要將.closest()語句中的'.navigation'替換為導航容器的相應選擇器。