极客观点
项目管理
HarmonyOS
我有一个 3 级嵌套引导手风琴，它工作正常，但我想在 面板标题 div 中进行更改，我可以在其中使用字体真棒图标 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>
但是此代码还更改了尚未打开的嵌套手风琴的图标。有没有更好的方法来解决这个问题将不胜感激。
原文由 Janshair Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议
我更喜欢使用 Bootstrap 文档中的示例和 CSS 切换图标。
我添加了 Font Awesome 图标作为
:after伪元素的内容。引导程序 4
基于 手风琴示例。
请检查结果： CodePen
引导程序 3
基于 手风琴示例。
请检查结果： CodePen • JSFiddle