Question

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

正如您在下面的代码中看到的那样，Vvron在触发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");
});

Answer 1

我通常更喜欢用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/

更改手风琴折叠时的图标方向

1 个答案: