如何将垂直菜单与按钮图标和子类别相结合(How to combine vertical menu with button icon and subcategories)

我正在使用twitter bootstrap进行项目，我有一个特定的侧边栏。我正在尝试合并使用手风琴和手机折叠菜单的子类别。我发现的最接近的是http://jsfiddle.net/JpJqD/2/ ，但是当我尝试用它封装时，它会中断：

<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

有任何想法吗？

I am using twitter bootstrap for a project and I have a specific sidebar in mind. I'm trying to incorporate subcategories that use an accordion and a collapse menu for phones. The closest I've found is http://jsfiddle.net/JpJqD/2/, but it breaks when I try to envelope it with:

<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

Any ideas?

最满意答案

是按钮的jquery。您需要做的就是在媒体查询中的.panel上设置display：none，无论您喜欢哪个宽度。

http://jsfiddle.net/JpJqD/116/

$(function(){ $('#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'); } }); $('.open-link').click(function(){ $('#sidebar').toggle(); }); });

Did the jquery for the button. All you need to do is set display:none on .panel in a media query, whichever width you prefer.

http://jsfiddle.net/JpJqD/116/

$(function(){ $('#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'); } }); $('.open-link').click(function(){ $('#sidebar').toggle(); }); });

更多推荐