我正在实施Bootstrap 3.3.7 Collapse（accordion）。我复制了示例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，以便在点击崩溃时使插入符号上升（dropup）：
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
感谢您的帮助。
答案 0 :(得分：2)
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代码。
答案 1 :(得分：0)
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>
答案 2 :(得分：0)
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>