我有一个三级嵌套的Bootstrap手风琴,它运行良好,但是我想在panel-heading div中进行更改,在手风琴打开时使用字体awesome图标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');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion">
<div class="panel panel-default">
<div class="panel-heading outer web">
<h4 class="panel-title fonter font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Getting Starting with ASP.NET Core 1.0
</h4>
</div>
<div id="aspnetcore" class="panel-collapse collapse outer-arrow">
<div class="panel-body">
<div class="panel-group" id="webdevelopment">
<a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Front-End
</h4>
</div>
<div id="frontend" class="panel-collpase collapse outer-arrow">
<div class="panel-body">
<div class="panel-group" id="webdevelopment">
<a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
Grunt Task Runner
</h4>
</div>
</div>
</a>
<a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Angular
2
</h4>
</div>
<div id="angular" class="panel-collpase collapse">
<div class="panel-body">
<a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
Introduction to Angular 2
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</a>
<a class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
LESS and SASS <i class="fa fa-cog fa-spin fa-fw"></i>
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</a>
<a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Back-End
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</a>
<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.6/js/bootstrap.min.js"></script>
但是这段代码也会改变尚未打开的嵌套手风琴的图标。如果有更好的解决方法,将不胜感激。