如何在不使用javascript的情况下旋转glyphicon？

Question

我正在使用twitter bootstrap而且我有glyphicon-menu-up.当我点击图标时,它会折叠并展开内容.

但是,当我点击图标时,我想使用CSS将图标旋转180度.我知道如何使用Javascript来做到这一点.但我只想使用CSS.

这是部分工作的JSFiddle演示

Answer 1

您的示例无论如何都使用JavaScript来触发div上的折叠状态.无论哪种方式,如果您从开发控制台观察标记,您都可以看到.collapsed在单击时将类添加到触发器(在本例中为您的按钮).

您可以使用此修改当前的css以使其正常工作:

.collapsed .glyphicon-menu-up {
  transform: rotate(180deg);
}