javascript - 更改 Accordion 折叠时的图标方向

我有这个JSFiddle，其中包括一个嵌入在另一个手风琴中的Bootstrap手风琴，问题是右边的Chevron现在不能像预期的那样工作。

从下面的代码中可以看到，在触发collapse时，人字形会改变方向，但是，现在它在嵌入式手风琴中，这似乎不是解决方案。

$('.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/