twitter-bootstrap 向 Bootstrap Accordion 添加向上/向下箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46777704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add up/down arrows to Bootstrap Accordion
提问by michaelmcgurk
I have a Bootstrap Accordion and I'd like to add state arrows to it.
我有一个 Bootstrap Accordion，我想给它添加状态箭头。
So the arrows will face down when collapsed and up when expanded.
所以箭头在折叠时朝下，展开时朝上。
My current code is here (including demo): https://jsfiddle.net/m1xj0avo/
我当前的代码在这里（包括演示）：https: //jsfiddle.net/m1xj0avo/
$(function () {
var active = true;
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Disable accordion behavior');
}
});
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
});.panel-title:hover {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="collapse-init" class="btn btn-primary">
Disable accordion behavior
</button>
<br/><br/>
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseTwo">
Collapsible Group Item #2
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseThree">
Collapsible Group Item #3
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>For this SO Question: <a href='http://stackoverflow.com/q/20347553/1366033'>Keep Accordions Open</a>
<br/>Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a>
<br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
<br/>
<div>回答by Robert
There are CSS-only solutions that make use of some of the triggers that Bootstrap's accordion already has in place. For example, an expanded .panel-titlehas a value of [area-expanded="true"]which we can use as a CSS Selector.
有一些仅 CSS 的解决方案利用了 Bootstrap 的手风琴已经存在的一些触发器。例如，一个 Expanded.panel-title有一个值[area-expanded="true"]，我们可以将其用作 CSS 选择器。
With that in mind you can use code like this:
考虑到这一点，您可以使用如下代码：
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">
Collapsible Group Item #2
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">
Collapsible Group Item #3
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>The carets are applied using Font Awesome and the :afterpseudo selector.
插入符号是使用 Font Awesome 和:after伪选择器应用的。
