嵌套引导折叠（手风琴）
Posted
技术标签:
【中文标题】嵌套引导折叠（手风琴）【英文标题】：Nested Bootstrap Collapse (Accordion) 【发布时间】：2018-10-27 14:09:24 【问题描述】：我正在实施 Bootstrap 3.3.7 Collapse（手风琴）。我确实复制了示例here。
我修改了面板标题部分，添加了插入符号并将文本移出锚点，以便只有插入符号可以点击以响应折叠事件：
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-role-1_sub-role-1-accordion" href="#collapse-sub-role-1_sub-role-1" aria-expanded="true" aria-controls="collapse-sub-role-1_sub-role-1">
<span class="caret caret-mr"></span>
</a>Sub Role 1
</h4>
我还添加了自定义 JS 和 CSS 以使插入符号在单击折叠时上升（下拉）：
var collapseList = $('.panel .panel-collapse');
collapseList.each(function()
var collapseId = $(this).attr('id');
$('#' + collapseId).on('show.bs.collapse', function()
$(this).prev('.panel-heading').find('.panel-title > a').addClass('dropup');
).on('hide.bs.collapse', function()
$(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
);
);
.panel .panel-heading>.panel-title>a>span.caret
border-top: 6px solid black;
.panel .panel-heading>.panel-title>a.dropup>span.caret
border-bottom: 6px solid black;
border-top: none;
我已更改所有 ID 和所有其他数据属性以避免冲突。
除了嵌套手风琴（手风琴主体内的手风琴）之外，这非常有效。目前，我有三层嵌套手风琴。问题是嵌套的手风琴也会影响到根手风琴的父级 - 他们的插入符号也会出现下拉或下拉。第二个手风琴（嵌套）影响第一个，第三个影响第二个和第一个。
完整代码：GitHub Gist
感谢您的帮助。
【问题讨论】：
为什么需要自定义 javascript？ Bootstrap 标记了活动的可折叠对象。 要回答你的问题，我认为这是因为这两个事件冒泡，所以你需要function(e) e.stopPropagation(); 在做你的逻辑之前。
我写 JS 不是为了可折叠的目的，而是为了修改插入符号的位置，从下到上，反之亦然。
这就是我所说的 'mark' 的意思 :) 你可以用你想要的任何方式来设置它，而无需自定义类，因为 Bootstrap 无论如何都会为你标记它。检查 Manish 的答案。
dropup 和 caret 都是 Bootstrap 类。
【参考方案1】：
collapseList.each(function()
var collapseId = $(this).attr('id');
$('#' + collapseId).on('show.bs.collapse', function()
$(this).closest('.panel').find('.panel-heading').find('.panel-title > a').addClass('dropup');
).on('hide.bs.collapse', function()
$(this).prev('.panel-heading').find('.panel-title > a').removeClass('dropup');
);
);
你可以试试这个，如果不修复请分享你写的面板的html代码。
【讨论】：
谢谢。我试过你的代码不可用。请看一下我的 HTML 代码：gist.github.com/julianjupiter/94c2e71f523e65376931c9333d787062 嘿，我认为这里不需要检查任何条件。看看这个，让我知道它是否解决了你的问题。 jsfiddle.net/8dL80u7g【参考方案2】：span[aria-expanded="true"] i::before
content: "\f106";
.uner
margin: 0 50px 15px;
#collapse1
border:1px solid #dedede;
border-top:0px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a>Collapsible Group 1</a>
<span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-angle-down"></i></span>
</h4>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a>Sub Collapsible Group 1.1</a>
<span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-angle-down"></i></span>
</h4>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a>Sub Collapsible Group 1.2</a>
<span class="pull-right" data-toggle="collapse" data-parent="#accordion" href="#collapse3"><i class="fa fa-angle-down"></i></span>
</h4>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
它适用于版本 4 吗？如果不能，请告诉我如何使用 bootstrap 4 做同样的事情【参考方案3】：2021 年更新
原始答案已过时。使用最新的 Bootstrap 5，只需在兄弟 Collapse 元素上使用 data-bs-parent= 属性即可实现 accordion behavior...
嵌套的手风琴可以放置在另一个 Collapse 元素中，然后成为嵌套子元素的data-bs-parent=。
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0 d-inline">
<button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapse #1 </button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="card-body" id="child1">
<div class="card">
<div class="card-header">
<a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneA">Child A</a>
</div>
<div class="card-body collapse" data-bs-parent="#child1" id="collapseOneA"> ... </div>
</div>
<div class="card">
<div class="card-header">
<a href="#" data-bs-toggle="collapse" data-bs-target="#collapseOneB">Child B</a>
</div>
<div class="card-body collapse" data-bs-parent="#child1" id="collapseOneB"> ... </div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapse #2 </button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapse #3 </button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
</div>
Bootstrap 5 Nested Accordion
【讨论】：
以上是关于嵌套引导折叠（手风琴）的主要内容，如果未能解决你的问题，请参考以下文章