Question

我是JavaScript的新手，这是我在这里的第一篇文章。

我正在制作一个使用bootstrap制作的管理控制面板，导航栏工作正常，但是当我只切换移动视图时，我试图在点击导航栏外部区域时隐藏它。这是我的导航栏代码

@media (max-width:767px) {
#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0px;
  width: 200px;
}

#wrapper.active {
  position: relative;
  left: 0px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 0px;
  transition: all 0.4s ease 0s;
}

#menu-toggle {
  display: inline-block;
}

css：

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

}

并切换它：

2sec

有人可以向我解释如何做到这一点？我尝试了几种方法，但是有些方法可行。

Answer 1

看看：

将navbar-collapse课程添加到您的nav代码

<nav class="navbar navbar-default navbar-fixed-top navbar-collapse" role="navigation">
   // rest of the code
</nav>

然后

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

你的小提琴适用于：http://jsfiddle.net/52VtD/5718/

单击该区域时隐藏导航栏

1 个答案: