如果点击外部隐藏/切换

我在这里使用此模板（http://startbootstrap.com/templates/simple-sidebar.html）为我的启动学习启动。我发现学习很不错。但我有疑问。如果点击外部隐藏/切换

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

用于切换的DIV的脚本如下：

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

此外，如果您有任何引导固定侧边栏的演示，请分享。

来源

2014-03-26 CyberWizard

也提供你的html –

你实际上需要展示你试过的东西，指出你有的具体问题。这就是工作原理。这不是关于共享代码，而是修复现有的代码。 – Shomz

你可能想看看jquery –

试试这个：

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

这将允许在侧边栏隐藏你听上的菜单切换按钮的点击收听的内容时，其余的点击边栏是可见的。

来源

2014-03-26 18:51:25

PERFECT answer.this做技巧伴侣。但是，我还没有问过它，但当侧边栏切换（可见），我向左滑动，我需要再次切换边栏。（手势类型）。我可以使用基本的jQuery来实现它吗？ – CyberWizard

@CyberWizard如果你在谈论滑动手势，你将无法通过JQuery来实现这一点。你可以看看https://jqueryui.com/ –

你将需要创建一个绝对定位的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>

来源

2014-03-26 18:21:24 Chris

如果点击外部隐藏/切换

回答

相关问题