单击引导菜单外部以将其关闭答案

【问题标题】：click outside bootstrap menu to close it单击引导菜单外部以将其关闭
【发布时间】：2016-04-24 23:53:39
【问题描述】：

我试图找到解决方案以在单击引导菜单外部时关闭引导菜单（以移动窗口大小），但无法使其工作，当我通过此代码单击“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

是的，我已经尝试过了，但不起作用：

similar question

【问题讨论】：

在哪里查看网站？
那里有iwebdesign.se

标签： javascript jquery css twitter-bootstrap menu

【解决方案1】：

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

只需复制代码并通过您的自定义脚本或 index.html

谢谢雷米点击外部隐藏引导切换菜单关闭（隐藏）它

【讨论】：

【解决方案2】：

假设您希望在单击菜单外部（即折叠菜单）时执行的操作与单击菜单内部时执行的操作不同，您可能希望通过类似的操作来确定您是单击菜单内部还是外部菜单：

$('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/ 大致展示了这个概念。

当然，您需要在@ 987654324 '.navigation'语句中用适当的选择器替换'.navigation' @ statement。

【讨论】：

ryandecker > 我尝试了您的代码并在单击时将其关闭，但仅当我单击导航栏时，问题可能是因为导航栏是 index.html 并且我在索引中有一个 iframe。在 index.html 中打开 mainpage.html 的 html
code $(document).ready(function () { $(document).click(function (event) { var clickover = $(event.target); var _opened = $(' .navbar-collapse').hasClass('collapse in'); if (_opened === true && !clickover.hasClass('navbar-toggle')) { alert('opened'); $('.collapse, # mainContainer').removeClass('in'); // 菜单按钮折叠和 htmlpage 淡入/淡出背景 fx 运行 $('.navbar-toggle').toggleClass('collapsed'); // 按钮 } }); } );
你能添加你的html吗？如果不知道 HTML 的结构，就不可能知道 JS 是否正确。很高兴仔细观察，但需要更多信息才能真正帮助您。此外，你完全正确的是 iframe 改变了一些东西——实际上改变了很多。您的 iframe 是否来自与您的主页相同的域？
对于它的价值，在您的网站上（在您的问题中链接），我没有看到导航发生任何扩展......所以我无法判断目标行为基于什么那个。
感谢 Ryan，我尝试粘贴 HTML，但无法发表评论(函数(事件) { if($(event.target).is('#page_wrap, #wrap, img, #mainContainer, .container, #mainContainer.container, .col-lg-12, .col-lg-12 .text-center, p.lead, div.jumbotron, div.navbar-header, h1')) { alert('clicked: ' + event.target.nodeName); $('.collapse, #mainContainer').removeClass ('in'); $('.navbar-toggle').removeClass('in').addClass('collapsed'); }else{ return; } });

【解决方案3】：

答案在这里：

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

希望对你有帮助:)

雷米

【讨论】：

谢谢 Remy，但我已经尝试过了。当我尝试这个并单击时，菜单根本没有出现。