javascript - 单击区域时隐藏导航栏

Question

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

我正在使用 bootstrap 制作的管理控制面板，导航栏工作正常，但我试图在切换为仅移动 View 时单击导航栏外部的区域来隐藏它。这是我的导航栏代码

<div id="sidebar-wrapper">
<div class="navbar-wrapper">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container-fluid" id="navfluid">
            <div class="navbar-brand">
                <a id="menu-toggle" href="#" style="padding-left: 20px;"><i class="fa fa-bars"></i></a>
            </div>
            <span class="navbar-text visible-xs-inline-block visible-sm-inline-block visible-lg-inline-block">
                <span id="tab_name"></span>
            </span>
        </div>
    </nav>
</div>
<nav class="navbar navbar-default navbar-fixed-left">
    <ul class="nav navbar-nav tabs" id="myTab" align="center">
        <!-- items -->
    </ul>
</nav>

CSS:

@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;
}

并切换它:

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

有人可以向我解释一下怎么做吗？我尝试了几种可行的方法，但有问题。

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

你的 fiddle 适用于:http://jsfiddle.net/52VtD/5718/