带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单

Posted 2023-03-24

技术标签:

【中文标题】带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单【英文标题】：Collapsible responsive sidebar menu with jQuery and Bootstrap 3 【发布时间】：2013-09-10 16:49:40 【问题描述】：

我有两个问题要问。

单击项目时，显示它并隐藏所有其他项目类似导航栏的可折叠响应侧边栏

一开始是我的 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>

【问题讨论】：

【参考方案1】：

这是我做的，希望它符合你的需要：

<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');

    

);

【讨论】：

【参考方案2】：