我是一个3级嵌套式bootstrap手风琴，工作正常，但我希望在 panel-heading div 中进行更改，我可以使用font-awesome图标{{1}手风琴折叠时打开手风琴时（不影响嵌套手风琴）和fa fa-chevron-down。我使用此代码更改图标：
fa fa-chevron-right$('div.panel-collapse.collapse').on('shown.bs.collapse', function() {
$(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
$(this).parent().find('.panel-heading').css('background', '#0271BC');
}).on('hidden.bs.collapse', function() {
$(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
$(this).parent().find('.panel-heading').css('background', '#02A4EF');
});
但是这段代码也改变了尚未打开的嵌套手风琴的图标。有没有更好的方法来解决这个问题将不胜感激。
答案 0 :(得分：11)
我更喜欢使用Bootstrap文档中的示例并通过CSS切换图标。
我添加了Font Awesome图标作为the :after pseudo-element的内容。
请检查结果：CodePen
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.mb-0 > a {
display: block;
position: relative;
}
.mb-0 > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}<div id="accordion">
<div class="card">
<div class="card-header" id="heading-1">
<h5 class="mb-0">
<a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Item 1
</a>
</h5>
</div>
<div id="collapse-1" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
<div class="card-body">
<div id="accordion-1">
<div class="card">
<div class="card-header" id="heading-1-1">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
Item 1 > 1
</a>
</h5>
</div>
<div id="collapse-1-1" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-1">
<div class="card-body">
<div id="accordion-1-1">
<div class="card">
<div class="card-header" id="heading-1-1-1">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
Item 1 > 1 > 1
</a>
</h5>
</div>
<div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-1">
<div class="card-body">
Text 1 > 1 > 1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-1-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
Item 1 > 1 > 2
</a>
</h5>
</div>
<div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-2">
<div class="card-body">
Text 1 > 1 > 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-1-3">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
Item 1 > 1 > 3
</a>
</h5>
</div>
<div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-3">
<div class="card-body">
Text 1 > 1 > 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-1-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
Item 1 > 2
</a>
</h5>
</div>
<div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2">
<div class="card-body">
Text 1 > 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-2">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h5>
</div>
<div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
<div class="card-body">
Text 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading-3">
<h5 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h5>
</div>
<div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
<div class="card-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
<div class="panel-group" id="accordion-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
Item 1 > 1
</a>
</h4>
</div>
<div id="collapse-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1">
<div class="panel-body">
<div class="panel-group" id="accordion-1-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
Item 1 > 1 > 1
</a>
</h4>
</div>
<div id="collapse-1-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-1">
<div class="panel-body">
Text 1 > 1 > 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
Item 1 > 1 > 2
</a>
</h4>
</div>
<div id="collapse-1-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-2">
<div class="panel-body">
Text 1 > 1 > 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-1-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
Item 1 > 1 > 3
</a>
</h4>
</div>
<div id="collapse-1-1-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-3">
<div class="panel-body">
Text 1 > 1 > 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
Item 1 > 2
</a>
</h4>
</div>
<div id="collapse-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-2">
<div class="panel-body">
Text 1 > 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
<div class="panel-body">
Text 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
答案 1 :(得分：1)
找到一个现有的jsFiddle：http://jsfiddle.net/zessx/r6eaw/12/ 并使用一点复制粘贴，一个带有嵌套手风琴的复制粘贴：http://jsfiddle.net/R6EAW/3979/
您的代码的一个问题是您将div（<a/>）标记嵌套在div中。这是不允许的。
答案 2 :(得分：1)
这是一个简单的例子，最初使用Jquery和Bootstrap正确显示图标。
¡可能对你有帮助！
$(function(){
$('.panel-title a[data-toggle="collapse"]').on('click', this, function(event) {
$('.panel-collapse').on('show.bs.collapse', function () {
$(this).siblings('.panel-heading').find('i').removeClass('fa-plus-circle').addClass('fa-minus-circle');
});
$('.panel-collapse').on('hide.bs.collapse', function () {
$(this).siblings('.panel-heading').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="item001">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail001" aria-expanded="true" aria-controls="detail001">
<div class="title">Title 1 <i class="fa fa-minus-circle" aria-hidden="true"></i></div>
</a>
</h4>
</div>
<div id="detail001" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="item001">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!--/ Panel -->
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="item002">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail002" aria-expanded="true" aria-controls="detail002">
<div class="title">Title 2 <i class="fa fa-plus-circle" aria-hidden="true"></i></div>
</a>
</h4>
</div>
<div id="detail002" class="panel-collapse collapse" role="tabpanel" aria-labelledby="item002">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!--/ Panel -->
</div>