jquery - 如何将垂直菜单与按钮图标和子类别结合起来

Question

我正在为一个元素使用 Twitter bootstrap，并且我有一个特定的侧边栏。我正在尝试合并使用 Accordion 和手机折叠菜单的子类别。我找到的最接近的是 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">

有什么想法吗？

Answer 1

为按钮做了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();
});
});