jQuery 带有 jQuery 和 Bootstrap 3 的可折叠响应侧边栏菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18660269/
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
Collapsible responsive sidebar menu with jQuery and Bootstrap 3
提问by Bora
I have two question for SO.
我有两个问题要问。
- when item clicked, show it and hide all other items
- collapsible responsive sidebar like navbar
- 单击项目时，显示它并隐藏所有其他项目
- 可折叠的响应式侧边栏，如导航栏
At first my jsFiddle Demo:http://jsfiddle.net/JpJqD/1/
起初我的 jsFiddle 演示：http : //jsfiddle.net/JpJqD/1/
I'm working to do collapsible sidebar menu.
我正在努力做可折叠的侧边栏菜单。
As you can see in the demo; when i click articles, should be collapse(hide) others. Then if click to users, articlesand other items that have sublevel should be collapse(hide). So always should be one opened menu.
正如您在演示中看到的那样；当我点击时articles，应该折叠（隐藏）其他人。然后，如果单击users，则articles其他具有子级别的项目应折叠（隐藏）。所以总是应该是一个打开的菜单。
I tried with collapsefrom Bootstrap document, but i couldnt with following codes:
我collapse从 Bootstrap 文档中尝试过，但无法使用以下代码：
$('#sidebar a').on('click', function () {
$(this).closest('div').find('.collapse').collapse('hide');
$(this).collapse('show');
});
I can do this with accordionbut i dont wanna it cause of required panelclass for all items.
我可以做到这一点，accordion但我不想panel因为所有项目都需要课程。
BTW I want to make responsive sidebar like navbarmenus for mobile and tablets? I used like in Bootstrap document but didnt work.
顺便说一句，我想navbar为手机和平板电脑制作像菜单一样的响应式侧边栏？我在 Bootstrap 文档中使用过，但没有用。
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
回答by Tourki
This is what i did , hope it fits your need :
这就是我所做的，希望它适合您的需要：
<div class="panel panel-default">
<div class="panel-heading">
<h3>Navigation</h3>
</div>
<div id="sidebar" class="list-group">
<a href="#" class="list-group-item active">
<i class="icon-dashboard"></i> Dashboard
</a>
<a href="#users" class="list-group-item" data-parent="#sidebar">
<i class="icon-group"></i> Users
<span class="badge bg_danger">0</span>
</a>
<div id="users" class="list-group subitem collapse">
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Users
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create User
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Group
</a>
</div>
<a href="#articles" class="list-group-item" data-parent="#sidebar">
<i class="icon-file-text"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<div id="articles" class="list-group subitem collapse">
<a href="#" class="list-group-item bg_warning">
<i class="icon-caret-right"></i> Articles
<span class="badge bg_danger">0</span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Article
</a>
</div>
</div>
</div>
And this is the corresponding js :
这是相应的js：
$('#sidebar > a').on('click', function (e) {
e.preventDefault();
if(!$(this).hasClass("active")){
var lastActive = $(this).closest("#sidebar").children(".active");
lastActive.removeClass("active");
lastActive.next('div').collapse('hide');
$(this).addClass("active");
$(this).next('div').collapse('show');
}
});
回答by Abhishek Goel
If you are looking for auto collapsible sidebar with animation this is the best according to me
如果您正在寻找带有动画的自动可折叠侧边栏，我认为这是最好的
Code
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
代码
https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
Demo
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar
演示
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar
