如果在外面点击，则隐藏/切换

我在这里使用这个模板（ http://startbootstrap.com/templates/simple-sidebar.html ），用于我在bootstrap学习中的启动。 我发现它很好学习。 不过我有疑问。

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

用于切换div的脚本如下：

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

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

Answer 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"); } }); 

这样，您可以在隐藏侧边栏时收听菜单切换按钮上的单击，并在侧边栏可见时收听其余内容的点击。

Answer 2

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

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