如何将垂直菜单与按钮图标和子类别相结合

时间:2014-02-06 17:20:50

标签: jquery css css3 twitter-bootstrap

我正在使用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">

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

按钮的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();
});
});