我有两个问题:
- 单击某个项目时,如何显示它并隐藏所有其他项目
- 如何获得像导航栏这样的可折叠响应式侧边栏
起初我的jsFiddle Demo: http://jsfiddle.net/JpJqD/1/
我正在努力制作可折叠的侧边栏菜单。
如您在演示中所见;当我点击 articles
时,应该是折叠(隐藏)其他的。然后,如果单击users
,articles
和其他具有子级别的项目应该折叠(隐藏)。所以应该总是一个打开的菜单。
我尝试使用 Bootstrap 文档中的 collapse
,但我无法使用以下代码:
$('#sidebar a').on('click', function () {
$(this).closest('div').find('.collapse').collapse('hide');
$(this).collapse('show');
});
我可以使用 accordion
来做到这一点,但我不想这样做,因为所有项目都需要 panel
类。
顺便说一句,我想为手机和平板电脑制作响应式侧边栏,例如 navbar
菜单?我在 Bootstrap 文档中使用了 like 但没有用。
<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>
最佳答案
这就是我所做的,希望它符合您的需要:
<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>
这是对应的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');
}
});
关于html - 使用 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18660269/