twitter-bootstrap Bootstrap 左侧边栏切换菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38765029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap left sidebar toggle menu
提问by ilmk
I got a script for Bootstrap sidebar toggle menu. It works fine for my needs.
我有一个 Bootstrap 侧边栏切换菜单的脚本。它可以很好地满足我的需求。
Right now the menu is toggling using Toggle Menu button, that is fine.But I need to close the menu if I click, out side of it.
现在菜单正在使用 Toggle Menu 按钮切换，这很好。但如果我点击菜单，我需要关闭菜单。
Please check this Fiddle
请检查这个小提琴
and help me out. Thanks.
并帮助我。谢谢。
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
回答by Leo the lion
To get this you have to play with jquery functions like .hasClass, .trigger, .isetc. What i did is, i checked the classes on click and then according to them i wrote this code. Please check
为了得到这一点，你有像jQuery功能的发挥.hasClass，.trigger，.is等我所做的是，我查了点击的类，然后根据他们我写了这个代码。请检查
See demo
看演示
In detail : First i check the class which is toggling on click of a hrefso i made a condition that if #wrapperhas toggled class then we will trigger the click event on #menu-togglebut also we have to careful that click should be on body but not the a href of side bar menu that's why i have added another condition with !tag. Hope you will understand and if not then let me know.
详细说明：首先，我检查在点击时切换的类，a href所以我提出了一个条件，如果#wrapper切换了类，那么我们将触发点击事件，#menu-toggle但我们必须注意点击应该在身体上，而不是在 a href 上侧边栏菜单这就是为什么我添加了另一个带有 !tag 的条件。希望你能理解，如果没有，请告诉我。
回答by Springer F
Add a window event to check where you are clicking,
添加一个窗口事件来检查你点击的位置，
Here is a snnipet :
这是一个 snipet ：
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).click(function(e) {
e.preventDefault();
if(e.target.id =="menu-toggle") return;
if($(e.target).closest('#sidebar-wrapper').length==0){
// small device toogled class added auto so remove it
if($("#wrapper").width() < 768 )
$("#wrapper").removeClass("toggled");
else
$("#wrapper").addClass("toggled");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/js/bootstrap.min.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>