更改折叠折叠时的图标方向

Change Icon Direction on Accordion Collapse

本文关键字：折叠 图标 方向      更新时间：2023-09-26

我有这个JSFiddle，其中包括一个嵌入在另一个手风琴中的引导手风琴，问题是右边的雪佛龙现在没有按预期运行。

正如下面的代码所示，当触发collapse时，V 形会改变方向，但是，现在它在嵌入式手风琴中，这似乎不是解决方案。

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});

我通常更喜欢使用 CSS 来做到这一点 - 比尝试检测嵌套时打开/关闭的项目或页面上有多个项目要少得多。

1） 如果默认情况下折叠的手风琴标题是关闭的，

则将类"折叠"添加到手风琴标题中（引导会切换此类，但如果页面加载时没有它，则在打开然后关闭手风琴项之前不会添加它）。

2）摆脱JS并添加此CSS：

.panel-heading.collapsed .glyphicon-chevron-down {
  transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
  transition:transform .5s;
  transform:rotateX(180deg);
}

如果你不喜欢翻转动画，只需摆脱transition规则，但我喜欢认为它增加了一点东西。

http://jsfiddle.net/rr7oggLv/6/

相关文章：