Question

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

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

以下是部分正常工作的JSFiddle Demo

Answer 1

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

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

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

Answer 2

正如此类QA所示，如果您只想要一个仅限CSS的解决方案，请尝试：active。