引导嵌套手风琴字体真棒图标

本文介绍了引导嵌套手风琴字体真棒图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个3级嵌套的bootstrap手风琴，它工作正常，但我想在 panel-heading div 处进行更改，我可以使用字体超赞图标当手风琴被打开时（不影响嵌套的手风琴）和 fa fa-chevron-right ，当手风琴折叠时，我使用此代码来更改图标： < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/ bootstrap / 3.3.6 / css / bootstrap.min.css>< link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/cs s / font-awesome.min.cssrel =stylesheet>< a href =＃aspnetcoreclass =accordion-toggle tutorial-panel-headingdata-toggle =collapsedata-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>开始使用ASP.NET Core 1.0< / h4> < / DIV> < div id =aspnetcoreclass =panel-collapse collapse outer-arrow> < div class =panel-body> < div class =panel-groupid =webdevelopment> < a href =＃frontendclass =accordion-toggle tutorial-panel-headingdata-toggle =collapsedata-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>前端< / h4> < / DIV> < div id =frontendclass =panel-collpase collapse outer-arrow> < div class =panel-body> < div class =panel-groupid =webdevelopment> < a asp-controller =Webasp-action =Gruntclass =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 =＃angularclass =accordion-toggle tutorial-panel-heading inner-linkdata-toggle =collapsedata-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>角2< / h4> < / DIV> < div id =angularclass =panel-collpase collapse> < div class =panel-body> < a asp-controller =Webasp-action =Angularclass =accordion-toggle lab-link> < div class =panel panel-default> < div class =panel-heading middle-link> < h4 class =panel-title font-light-text> 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 =＃backendclass =accordion-toggle tutorial-panel-headingdata-toggle =collapsedata-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>后端< / 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> 但是这段代码也改变了尚未打开的嵌套式手风琴的图标。 是否有更好的方法来解决这个问题将不胜感激。解决方案我更喜欢使用Bootstrap文档中的示例，通过CSS切换图标。 我已经将Font Awesome图标添加为< a href =https://developer.mozilla.org/ 在/ rel =nofollow noreferrer> ：伪元素之后 / docs / Web / CSS / :: 引导程序4 基于手风琴例子。 请检查结果： 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> {display：block; position：relative;}。mb-0> a：after {content：\f078; / * fa-chevron-down * / font-family：'FontAwesome';位置：绝对; right：0;}。mb-0> a [aria-expanded =true]：after {content：\f077; / * fa-chevron-up * /} < div id =accordion> < div class =card> < div class =card-headerid =heading-1> < h5 class =mb-0> < a role =buttondata-toggle =collapsehref =＃collapse-1aria-expanded =truearia-controls =collapse-1>第1项< / a> < / H5> < / DIV> < div id =collapse-1class =collapse showdata-parent =＃accordionaria-labelledby =heading-1> < div class =card-body> < div id =accordion-1> < div class =card> < div class =card-headerid =heading-1-1> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-1-1aria-expanded =falsearia-controls =collapse-1-1>项目1> 1< / a> < / H5> < / DIV> < div id =collapse-1-1class =collapsedata-parent =＃accordion-1aria-labelledby =heading-1-1> < div class =card-body> < div id =accordion-1-1> < div class =card> < div class =card-headerid =heading-1-1-1> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-1-1-1aria-expanded =falsearia-controls =collapse-1-1- 1\" >项目1> 1> 1< / a> < / H5> < / DIV> < div id =collapse-1-1-1class =collapsedata-parent =＃accordion-1-1aria-labelledby =heading-1-1-1> < div class =card-body>文本1> 1> 1< / div> < / DIV> < / DIV> < div class =card> < div class =card-headerid =heading-1-1-2> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-1-1-2aria-expanded =falsearia-controls =collapse-1-1- 2\" >项目1> 1> 2< / a> < / H5> < / DIV> < div id =collapse-1-1-2class =collapsedata-parent =＃accordion-1-1aria-labelledby =heading-1-1-2> < div class =card-body>文本1> 1> 2< / div> < / DIV> < / DIV> < div class =card> < div class =card-headerid =heading-1-1-3> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-1-1-3aria-expanded =falsearia-controls =collapse-1-1- 3\" >项目1> 1> 3< / a> < / H5> < / DIV> < div id =collapse-1-1-3class =collapsedata-parent =＃accordion-1-1aria-labelledby =heading-1-1-3> < div class =card-body>文本1> 1> 3< / div> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =card> < div class =card-headerid =heading-1-2> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-1-2aria-expanded =falsearia-controls =collapse-1-2>项目1> 2< / a> < / H5> < / DIV> < div id =collapse-1-2class =collapsedata-parent =＃accordion-1aria-labelledby =heading-1-2> < div class =card-body>文本1> 2< / div> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =card> < div class =card-headerid =heading-2> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-2aria-expanded =falsearia-controls =collapse-2>第2项< / a> < / H5> < / DIV> < div id =collapse-2class =collapsedata-parent =＃accordionaria-labelledby =heading-2> < div class =card-body>文字2< / div> < / DIV> < / DIV> < div class =card> < div class =card-headerid =heading-3> < h5 class =mb-0> < a class =collapsedrole =buttondata-toggle =collapsehref =＃collapse-3aria-expanded =falsearia-controls =collapse-3>项目3< / a> < / H5> < / DIV> < div id =collapse-3class =collapsedata-parent =＃accordionaria-labelledby =heading-3> < div class =card-body>文字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> >基于手风琴例子。 请检查结果： CodePen  •  ; JSFiddle @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> {display：block; position：relative;}。panel-title> a：after {content：\f078; / * fa-chevron-down * / font-family：'FontAwesome';位置：绝对; right：0;}。panel-title> a [aria-expanded =true]：after {content：\f077; / * fa-chevron-up * /} < div class =panel-groupid =accordionrole =tablistaria-multiselectable =true> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1> < h4 class =panel-title> < a role =buttondata-toggle =collapsedata-parent =＃accordionhref =＃collapse-1aria-expanded =truearia-controls =collapse-1>第1项< / a> < / H4> < / DIV> < div id =collapse-1class =panel-collapse collapse inrole =tabpanelaria-labelledby =heading-1> < div class =panel-body> < div class =panel-groupid =accordion-1role =tablistaria-multiselectable =true> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1-1> < h4 class =panel-title> < a role =buttondata-toggle =collapsedata-parent =＃accordion-1href =＃collapse-1-1aria-expanded =falsearia-controls =collapse-1 -1\" >项目1> 1< / a> < / H4> < / DIV> < div id =collapse-1-1class =panel-collapse collapserole =tabpanelaria-labelledby =heading-1-1> < div class =panel-body> < div class =panel-groupid =accordion-1-1role =tablistaria-multiselectable =true> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1-1-1> < h4 class =panel-title> < a role =buttondata-toggle =collapsedata-parent =＃accordion-1-1href =＃collapse-1-1-1aria-expanded =falsearia-controls = 崩溃-1-1-1 >项目1> 1> 1< / a> < / H4> < / DIV> < div id =collapse-1-1-1class =panel-collapse collapserole =tabpanelaria-labelledby =heading-1-1-1> < div class =panel-body>文本1> 1> 1< / div> < / DIV> < / DIV> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1-1-2> < h4 class =panel-title> < a class =collapsedrole =buttondata-toggle =collapsedata-parent =＃accordion-1-1href =＃collapse-1-1-2aria-expanded =false aria-controls =collapse-1-1-2>项目1> 1> 2< / a> < / H4> < / DIV> < div id =collapse-1-1-2class =panel-collapse collapserole =tabpanelaria-labelledby =heading-1-1-2> < div class =panel-body>文本1> 1> 2< / div> < / DIV> < / DIV> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1-1-3> < h4 class =panel-title> < a class =collapsedrole =buttondata-toggle =collapsedata-parent =＃accordion-1-1href =＃collapse-1-1-3aria-expanded =false aria-controls =collapse-1-1-3>项目1> 1> 3< / a> < / H4> < / DIV> < div id =collapse-1-1-3class =panel-collapse collapserole =tabpanelaria-labelledby =heading-1-1-3> < div class =panel-body>文本1> 1> 3< / div> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-1-2> < h4 class =panel-title> < a class =collapsedrole =buttondata-toggle =collapsedata-parent =＃accordion-1href =＃collapse-1-2aria-expanded =falsearia-controls = 崩溃-1-2 >项目1> 2< / a> < / H4> < / DIV> < div id =collapse-1-2class =panel-collapse collapserole =tabpanelaria-labelledby =heading-1-2> < div class =panel-body>文本1> 2< / div> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-2> < h4 class =panel-title> < a class =collapsedrole =buttondata-toggle =collapsedata-parent =＃accordionhref =＃collapse-2aria-expanded =falsearia-controls =collapse- 2\" >第2项< / a> < / H4> < / DIV> < div id =collapse-2class =panel-collapse collapserole =tabpanelaria-labelledby =heading-2> < div class =panel-body>文字2< / div> < / DIV> < / DIV> < div class =panel panel-default> < div class =panel-headingrole =tabid =heading-3> < h4 class =panel-title> < a class =collapsedrole =buttondata-toggle =collapsedata-parent =＃accordionhref =＃collapse-3aria-expanded =falsearia-controls =collapse- 3\" >项目3< / a> < / H4> < / DIV> < div id =collapse-3class =panel-collapse collapserole =tabpanelaria-labelledby =heading-3> < div class =panel-body>文字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> I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the panel-heading div where I can use a font-awesome icon fa fa-chevron-down when the accordion is opened (Without affecting the nested accordions) and fa fa-chevron-right when accordion is collapsed. I'm using this code to changing the icon:$('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>But this code also change the icons of the nested accordions which are not opened yet. Is there any better way to resolve this issue will be appreciated. 解决方案 I prefer to use examples form the Bootstrap documentation and toggle icons by CSS.And I've added Font Awesome icons as a content of the :after pseudo-element.Bootstrap 4Based on the Accordion example.Please check the result: 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>Bootstrap 3Based on the Accordion example.Please check the result: CodePen  •  JSFiddle@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> 这篇关于引导嵌套手风琴字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！