Question

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

当我在移动模式下打开模板时，它会显示一个图标（菜单图标），当我点击它时，它会显示侧边栏。现在，当我在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();
});

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

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

2 个答案: