jquery - 如果在外部单击则隐藏/切换

Question

我在这里 ( 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");
    }
});

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