使用CSS而非jQuery切换类

Question

能否仅使用CSS切换类？

假设我有以下代码：

<div class="parent">
   <div class="child collapsed">
        Boring Text
   </div>
</div>

使用CSS，是否可以在单击parent时将collapsed类切换为expanded，反之亦然？

- KingKongFrog

---

如上所述，答案是否定的。但是，如果您真的不想使用js / jquery，可以考虑查看复选框hack：http://css-tricks.com/the-checkbox-hack/。再次强调，这只是一个hack，但可以完成工作。 - mikedidthis

Answer 1

能否仅使用CSS来切换类？

不行。

您可以使用伪类，例如:hover、:active、:checked和:target来处理状态，但这与更改DOM中的类属性状态不同。

- zzzzBov

---

@Wes，那与所提出的问题完全无关。 - zzzzBov

@Wes，不是关于管理伪类状态的问题，而是关于切换类的问题。 - zzzzBov

我不明白为什么你这么激动，因为很明显OP是在问如何在激活/非激活之间切换，而不是切换一个特定的.class。而且，我只是提供了一条注释，并没有说你错了。 - user652649

看了一下楼主的问题，答案是否定的。不过，作为一个乐于助人的社区，也许我们可以看一下提供的代码，并建议一个仅使用CSS的解决方案，具有相同的结果、伪类等。 - mikedidthis

你可以使用复选框技巧来实现任何事情... (http://codepen.io/rlemon/pen/vmIlC) - rlemon

Answer 2

你可以找到一些类似这样的内容 https://dev59.com/pl0Z5IYBdhLWcg3wvSd2#76489732

.caret {
  transition: 0.5s;
}
.caret:not(.collapsed){
  transform: rotate(180deg);
}
.caret:is(.collapsed) {
  transform: rotate(0deg);
}

- Alison Nunes