如果在外部单击，则隐藏/切换答案

【问题标题】：Hide /toggle if clicked outside如果在外部单击，则隐藏/切换
【发布时间】：2014-05-05 08:49:21
【问题描述】：

我在这里使用这个模板 (http://startbootstrap.com/templates/simple-sidebar.html) 来启动我的引导学习。我觉得很好学。但是我有一个疑问。

当我在移动模式下打开模板时，它会显示一个图标（菜单图标），当我单击它时，它会显示侧边栏。现在，当我在 div 外部单击时，理想情况下它应该隐藏侧边栏（自动切换），但它没有。请让我知道如何解决/实现它。

用于切换 div 的脚本如下：

   $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

另外，如果你在 bootstrap 中有任何固定的侧边栏演示，请分享。

【问题讨论】：

也提供你的html
您实际上需要展示您的尝试，指出您遇到的具体问题。这就是 SO 的工作原理。这不是共享代码，而是修复现有代码。
你可能想看看 jquery 中的blur 事件
@ALL，我还处于基本阶段，与共享链接中的 html / css / 脚本相同：startbootstrap.com/templates/simple-sidebar.html

标签： jquery css twitter-bootstrap

【解决方案1】：

试试这个：

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("active");
});

$("#page-content-wrapper").click(function(e) {
    e.preventDefault();
    if $("#wrapper").hasClass("active"){
      $("#wrapper").toggleClass("active");
    }
});

这将允许您在侧边栏隐藏时侦听对菜单切换按钮的点击，并在侧边栏可见时侦听对其余内容的点击。

【讨论】：

完美答案。这可以解决问题。但是，我也没有问过它，但是当侧边栏被切换（可见）并且我向左滑动时，我需要再次切换侧边栏。（手势类型）。我可以使用基本的 jquery 来实现它吗？
@CyberWizard 如果您在谈论滑动手势，您将无法使用 JQuery 实现这一点。你可以看看jqueryui.com

【解决方案2】：

您需要创建一个绝对定位的 div，覆盖您要单击的内容区域以隐藏侧边栏，您必须通过 CSS 指定其宽度和高度。它还需要自己的点击事件。可以将其视为一种覆盖左侧内容的巨大按钮。如果您导航到不同的部分，此示例不包括隐藏 div 的情况。

$('#menu-toggle').click(function(e) {
 $('.covers-content').show();
});

$('.covers-content').onClick(function(e) {
 $('#wrapper').toggleClass("active");
 $('.covers-content').hide();
});

<div class="covers-content" style="display:none"></div>

【讨论】：