我得到了 hidden-input 和 display: none 和 opacity: 0。动画按计划在 label 单击时发生。
但是，我实际上需要它起到切换的作用，这样如果未选中 checkbox，它也可以隐藏相同的动画。
我认为我的注释代码会起作用，但如果您取消注释，input 将永远不会显示。
我如何修改 JS/CSS，使 CSS 不透明动画在显示和隐藏时同时发生，并在 hidden 和 visible 状态之间正确切换？
编辑此处必须在隐藏状态下设置display: none。
最佳答案
查看此工作版本:http://jsfiddle.net/n4Lep9jf/
有两个变化:
1) 在检查它是否已经激活之前，您要进行各种 CSS 更改并将类设置为 active。因此，代码中的 if 语句将始终返回 true，从而消除了这些 CSS 更改。相反，应该在 if 语句的 else block 中将该类设置为事件的(以及伴随的 JS 行)。
2) 我将 $toggler 设置为引用复选框本身，并将 click 处理程序更改为 change。我发现标签上的 click 事件触发了两次，这解决了这个问题。我对点击处理程序触发两次这一事实感到惊讶，但我猜这是链接到复选框的标签的行为标准。
关于javascript - jQuery:在状态和类之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32878105/