- 首页
- 前端开发
- Bootstrap 嵌套的手风琴字体-很棒的图标
Bootstrap 嵌套的手风琴字体-很棒的图标
[英] Bootstrap nested accordion font-awesome icons
本文介绍了Bootstrap 嵌套的手风琴字体-很棒的图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 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 external web"><h4 class="panel-title fonter font-light-text"><i class="fa fa-chevron-down pull-right"></i>ASP.NET Core 1.0 入门
<div id="aspnetcore" class="panel-collapse 折叠外箭头"><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>前端
<div id="frontend" class="panel-collpase 折叠外箭头"><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 任务运行器
</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>角2
<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">Angular 2 简介
</a>
</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 和 SASS <i class="fa fa-cog fa-spin fa-fw"></i>
</a>
</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>后端
</a>
</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>
但是这段代码也改变了尚未打开的嵌套手风琴的图标.有没有更好的方法来解决这个问题将不胜感激.
解决方案
我更喜欢使用来自引导程序文档的示例并通过 CSS 切换图标.
并且我添加了 Font Awesome 图标作为 :after 伪元素.
<小时>引导程序 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 >一种 {显示:块；位置:相对；}.mb-0 >一个:{内容:f078"；/* 人字形向下 */字体系列:'FontAwesome';位置:绝对；右:0；}.mb-0 >a[aria-expanded="true"]:after {内容:f077"；/* 人字形向上 */}
<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">第 1 项</a>
<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">项目 1 >1</a>
<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">项目 1 >1 >1</a>
<div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-1"><div class="card-body">文本 1 >1 >1
<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">项目 1 >1 >2</a>
<div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-2"><div class="card-body">文本 1 >1 >2
<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">项目 1 >1 >3</a>
<div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-3"><div class="card-body">文本 1 >1 >3
<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">项目 1 >2</a>
<div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2"><div class="card-body">文本 1 >2
<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">第 2 项</a>
<div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2"><div class="card-body">正文 2
<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">第 3 项</a>
<div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3"><div class="card-body">正文 3
<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>
<小时>引导程序 3
基于手风琴示例.
请检查结果: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');.面板标题>一种 {显示:块；位置:相对；}.面板标题>一个:{内容:f078"；/* 人字形向下 */字体系列:'FontAwesome';位置:绝对；右:0；}.面板标题>a[aria-expanded="true"]:after {内容:f077"；/* 人字形向上 */}
<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">第 1 项</a>
<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">项目 1 >1</a>
<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=折叠-1-1-1">项目 1 >1 >1</a>
<div id="collapse-1-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-1"><div class="panel-body">文本 1 >1 >1
<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">项目 1 >1 >2</a>
<div id="collapse-1-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-2"><div class="panel-body">文本 1 >1 >2
<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">项目 1 >1 >3</a>
<div id="collapse-1-1-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-3"><div class="panel-body">文本 1 >1 >3
<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="折叠-1-2">项目 1 >2</a>
<div id="collapse-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-2"><div class="panel-body">文本 1 >2
<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">第 2 项</a>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2"><div class="panel-body">正文 2
<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">第 3 项</a>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3"><div class="panel-body">正文 3
<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 4
Based 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 3
Based 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>
这篇关于Bootstrap 嵌套的手风琴字体-很棒的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
