Bootstrap 折叠元素 - 折叠未使用的 div答案

【问题标题】：Bootstrap collapse element - collapsing divs not in useBootstrap 折叠元素 - 折叠未使用的 div
【发布时间】：2013-05-31 03:28:17
【问题描述】：

我们正在将我们学院的 Intranet 迁移到 Bootstrap 模板。在这样做的过程中，我们想为我们的各个选区添加一些可折叠的菜单。你可以在这里查看结果：

http://www.scrippscollege.edu/intranet/index2.html

每个菜单都会自行正确响应（它会打开和关闭），但我们如何才能使用“学院”菜单关闭“学生”菜单，反之亦然？

更新添加了相应的代码；这是菜单中的列表项：

<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-students" href="#">Students</a></li>
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-faculty" href="#">Faculty</a></li>
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-staff" href="#">Staff</a></li>

这是由上述代码切换的每个 div 的开头：

<div id="menu-students" class="collapse clearfix hidden-phone">

<div id="menu-faculty" class="collapse clearfix hidden-phone">

<div id="menu-staff" class="collapse clearfix hidden-phone">

可以将手风琴方法/分类法应用于像我们这样的菜单系统吗？我见过的所有示例都涉及堆叠链接。

【问题讨论】：

您应该向我们展示您处理菜单的代码，并告诉我们您尝试了什么。

标签： twitter-bootstrap collapse

【解决方案1】：

您可以使用 jQuery 隐藏其他打开的“折叠”div。有点像..

$('#menu-top-menu [data-toggle=collapse]').on('click', function (e) {
   $('.collapse').not($(this).data("target")).collapse('hide');
});

【讨论】：

我认为当问题询问 accordion-group 的本机行为时，没有必要破解手风琴行为。
主要问题并没有真正要求本地行为，而是要求与手风琴结构分离的类似功能。对此答案 +1。

【解决方案2】：

这是可折叠元素的原生行为，请确保为可折叠元素构建组并正确定义 data-toggle、data-parent 和 href 属性。按照documentation中的例子：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
</div>

【讨论】：