将打开/关闭图标添加到 Twitter Bootstrap 可折叠项（手风琴）
Posted
技术标签:
【中文标题】将打开/关闭图标添加到 Twitter Bootstrap 可折叠项（手风琴）【英文标题】：Adding open/closed icon to Twitter Bootstrap collapsibles (accordions) 【发布时间】：2012-11-26 13:16:33 【问题描述】：我已经设置了这个简单版本的 Bootstrap accordion：
简单的手风琴： http://jsfiddle.net/darrenc/cngPS/
目前图标只指向向下，但是有谁知道需要实现什么JS才能将图标的类更改为：
<i class="icon-chevron-up"></i>
...这样它在展开时指向上，而在折叠时又切换回向下，所以是第四个？
【问题讨论】：
【参考方案1】：对于那些在 Bootstrap 3 中寻找解决方案的人（比如我自己），这就是答案。
html 部分：
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
js部分：
$('.collapse').on('shown.bs.collapse', function()
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
).on('hidden.bs.collapse', function()
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
);
手风琴示例：
Bootply accordion example
【讨论】：
正是 bootstrap 3.x 所需要的。如果使用 2.x 删除.bs.collapse。我还更改了shown and hidden to show and hide，因此动画在手风琴打开之前发生。
这应该是正确的答案，因为它也在版本 4 中运行
嵌套手风琴怎么样？子元素没有人字形，但我仍然可以在父元素上进行切换。【参考方案2】：
这是我对 Bootstrap 2.x 的方法。这只是一些CSS。无需 javascript：
.accordion-caret .accordion-toggle:hover
text-decoration: none;
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong
text-decoration: underline;
.accordion-caret .accordion-toggle:before
font-size: 25px;
vertical-align: -3px;
.accordion-caret .accordion-toggle:not(.collapsed):before
content: "▾";
margin-right: 0px;
.accordion-caret .accordion-toggle.collapsed:before
content: "▸";
margin-right: 0px;
只需将类 accordion-caret 添加到手风琴组 div，如下所示：
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
【讨论】：
我真的很喜欢马丁的这种方法。特别是因为非常不引人注目。 我发现这有一个例外 - 初始插入符号始终显示为所有部分展开。一旦你展开然后再次折叠，它就是正确的。 @Robb - 我在 html 中的“collapse”元素中包含了“collapsed”类，以解决初始箭头的问题。我的 html 有点不同，但它可能会工作 我也喜欢 css 解决方案。我的一些同行在 css 中比 javascript 更舒服，所以这对我的团队来说是一个更好的解决方案。感谢您解决初始化部分。现在效果很好！【参考方案3】：Bootstrap Collapse 有一些您可以做出反应的事件：
$(document).ready(function()
$('#accordProfile').on('shown', function ()
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
);
$('#accordProfile').on('hidden', function ()
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
);
);
【讨论】：
Muffls，你是明星！也很好很简单，谢谢你;-) 不客气！您也可以使用显示或隐藏来代替显示和隐藏。试试看。你会看到你喜欢哪一个。 嗨，Muffs，您知道为什么这在我的现场测试站点上不起作用吗？ datascrew.co.uk/gordonedge.com add $(document).ready(... in you main.js 我已经把代码放在上面了。 Bootstrap3：事件名称需要有 .bs.collapse，所以它们是 on('hide.bs.collapse') 和 on('show.bs.collapse')，或者在什么时候显示/隐藏你想给它添加更多的 CSS 过渡。【参考方案4】：使用 CSSes 伪选择器：在使用 Bootstrap 3 的集成 Glyphicons 获得 无 JS 答案 并稍微修改您的 HTML...
CSS
.panel-heading [data-toggle="collapse"]:after
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
.panel-heading [data-toggle="collapse"].collapsed:after
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
HTML
将class="collapsed" 添加到默认关闭的任何锚标记。
这将使锚点如
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
进入
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
CodePen 现场示例
http://codepen.io/anon/pen/VYobER
截图
【讨论】：
此jsbin链接已被举报 将其移至 CodePen。感谢您的报告。试试看！【参考方案5】：添加到@muffls 答案中，以便它适用于所有 twitter bootstrap 折叠并在动画开始之前更改箭头。
$('.collapse').on('show', function()
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
).on('hide', function()
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
);
根据您的 HTML 结构，您可能需要修改 parent()。
【讨论】：
+1 把它放进去，它对我有用 - 只是修改为使用 icon-chevron-right 而不是 left 这个对我有用。单击而不是单击的选项卡时，其他代码会更改所有选项卡的类:)【参考方案6】：我认为最好的代码是这些：
$('#accordion1').collapse(
toggle: false
).on('show',function (e)
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
).on('hide', function (e)
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
);
【讨论】：
这对我来说是唯一可行的解决方案，其余的切换所有手风琴组的类。干杯:)【参考方案7】：如果有人感兴趣，这就是您使用 BS3 的方式，因为他们更改了事件名称：
$('.collapse').on('show.bs.collapse', function()
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
).on('hide.bs.collapse', function()
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
);
您只需将示例中的类名更改为您在案例中使用的类名。
【讨论】：
感谢 b3rgstrom，感谢。下次使用 BS3 时我会检查一下。 没有问题，认为将来有人可能会遇到同样的问题：)【参考方案8】：最易读的纯 CSS 解决方案可能是使用 aria-expanded 属性。请记住，您需要将 aria-expanded="false" 添加到所有折叠元素，因为这不是在加载时设置的（仅在第一次单击时）。
HTML：
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
CSS：
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
display: none;
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
display: inline;
适用于 Bootstrap 3.x。
【讨论】：
这非常有效。因为我的锚标记是数据切换，所以我只是在 CSS 中将 h2 更改为 a【参考方案9】：这是我的解决方案，它从@john-magnolia 发布的解决方案进一步完善并解决了它的一些问题
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles()
$('.collapse').on('show', function()
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
).on('hide', function()
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
);
这里是示例标记：
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
【讨论】：
好人 - 我觉得自己是个大白痴，但无法让这些解决方案中的任何一个工作：-S 我能想到的唯一区别是我使用新的 bootstrap3，因此得到了类“ glyphicon glyphicon-chevron-right。任何指针？ Bootstrap 3 不是向后兼容的版本。请参考 Bootstrap 3 文档如何迁移代码。 你好，Mikko，谢谢你，是的，我收集到了，在这里得到了很好的帮助：***.com/questions/18147338/…【参考方案10】：一个引导 v3 解决方案（其中事件具有不同的名称），也仅使用一个 jQuery 选择器（如 here 所示）：
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n)
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
);
【讨论】：
优秀答案【参考方案11】：这就是我没有任何js的方式。
我使用了 glyphicon-triangle-right 图标，但它适用于任何其他图标，它的作用是在面板打开与否时对图标应用 90 度旋转。我正在为此使用 Bootstrap 3.3.5。
CSS 代码
h4.panel-title a
display: block;
h4.panel-title a.collapsed .glyphicon-triangle-right
color: #ada9a9 !important;
transform: rotate(0deg);
h4.panel-title a .glyphicon-triangle-right
color: #515e64 !important;
transform: rotate(90deg);
这是来自 Bootstrap 示例的 HTML 结构
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
【讨论】：
这个方法对我有用，但初始状态旋转了 90 度。您能否建议如何使初始状态不旋转（0度）？谢谢！ 在锚元素中添加 class="collapsed" 以避免发生在你身上的事情 感谢您的回复！我实际上尝试了 '' 但没有运气。这是正确的吗？
它必须在锚标记上，因为当 onClick 事件触发时，bootstrap js 会发生什么变化，请在此页面上查看，正在使用我提到的解决方案acubavoy.com/preguntas-frequentes【参考方案12】：以上方法都不适合我，但我想出了这个方法，它奏效了：
function toggleChevron(el)
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
HTML 实现：
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
【讨论】：
【参考方案13】：@RobSadler：
RE Martin Wickman 的纯 CSS 版本...
您可以通过将手风琴插入符号放在锚标记上并默认为其提供折叠类来解决该问题。像这样：
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
这对我有用。
【讨论】：
【参考方案14】：对于 Bootstrup 3.2 + FontAwesome
$(document).ready(function()
$('#accordProfile').on('shown.bs.collapse', function ()
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
);
$('#accordProfile').on('hidden.bs.collapse', function ()
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
);
);
有时你必须这样写。如果是这样的话
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
按隐藏菜单时自动生成 (class="collapsed")。
ps 当你需要创建树形菜单时
【讨论】：
【参考方案15】：这已通过多种方式得到解答，但我想出的是最简单和最简单的 Bootstrap 3 和字体真棒。我刚刚做了
$('a.toggler').on('click', function () $('i', this).toggleClass('fa-caret-up'););
这只是切换我要显示的图标的 CSS 类。我将类 toggler 添加到我想要应用它的项目中。这可以添加到您想要切换图标的任何项目上。
【讨论】：
【参考方案16】：这是针对这个非常古老的问题的 2021 更新...
引导程序 5
使用 CSS 上/下三角形的图标无关解决方案（不使用特定的图标库）...
/* for up.down arrows after collapse items with submenus */
[data-bs-toggle="collapse"]::after
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0;
border-right: 0.3em solid transparent;
border-bottom: 0.3em solid;
border-left: 0.3em solid transparent;
[data-bs-toggle="collapse"].collapsed::after
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-bottom: 0;
border-right: 0.3em solid transparent;
border-top: 0.3em solid;
border-left: 0.3em solid transparent;
Demo using sidebar with collapse submenu
【讨论】：
感谢齐姆！对于所有回复的人，感谢您的意见！有趣的是这篇文章仍然具有相关性，再次感谢大家:)【参考方案17】：另一个使用折叠功能本身的无 JavaScript 解决方案：
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in
display: inline;
.expand-icon.collapsing
display: none;
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
【讨论】：
【参考方案18】：对于使用 Bootstrap 3 的纯 CSS（和无图标）解决方案，我不得不根据上面 Martin Wickman 的回答做一些摆弄。
我没有使用手风琴-* 符号，因为它是通过 BS3 中的面板完成的。
另外，我必须在页面加载时打开的项目中包含初始 HTML aria-expanded="true"。
这是我使用的 CSS。
.accordion-toggle:hover text-decoration: none;
.accordion-toggle:hover span, .accordion-toggle:hover strong text-decoration: underline;
.accordion-toggle:before font-size: 25px;
.accordion-toggle[data-toggle="collapse"]:before content: "+"; margin-right: 0px;
.accordion-toggle[aria-expanded="true"]:before content: "-"; margin-right: 0px;
这是我净化后的 HTML：
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
【讨论】：
【参考方案19】：最短的答案。
HTML
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
JS：
<script type="text/javascript">
$(function ()
$('a[data-toggle="collapse"]').click(function ()
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
)
)
</script>
当然，您可以使用任何选择器代替锚标记a，如果您的图标位于单击的元素之外，您也可以使用特定的选择器代替this。
【讨论】：
【参考方案20】：这是一个解决方案，它使用某种材料设计、bootstrap 4.5/5 alpha 和完全非 javascript 创建一个可扩展的部分。
头部样式
<style>
[data-toggle="collapse"] .fa:before
content: "\f077";
[data-toggle="collapse"].collapsed .fa:before
content: "\f078";
</style>
正文 html
<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
<i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
CONTENT GOES IN HERE
</div>
【讨论】：
以上是关于将打开/关闭图标添加到 Twitter Bootstrap 可折叠项（手风琴）的主要内容，如果未能解决你的问题，请参考以下文章
css 这会将facebook twitter和instagram图标添加到包含“facebook.com”，“twitter.com”和“instagram.com”的内容中的链接
开源软件丨Bootstrap 官方开源 SVG 图标库 Bootstrap Icons