我与hidden-input和display: none获得了opacity: 0。动画按照label点击计划进行。
但是，我需要它实际上用作切换，因此如果取消选中checkbox，它也可以使用相同的动画隐藏。
我认为我的评论代码会有效，但如果您取消注释，则input永远不会显示。
如何修改JS / CSS，使得CSS不透明动画在show＆amp; amp;隐藏并在hidden和visible州之间正确切换？
编辑：display: none处于隐藏状态是必须的。
答案 0 :(得分：1)
请参阅此工作版本：http://jsfiddle.net/n4Lep9jf/
有两处变化：
1）您正在进行各种CSS更改并将类设置为active，甚至检查它是否已处于活动状态。因此，代码中的if语句将始终返回true，从而删除这些CSS更改。相反，应该在if语句的else块中将类设置为活动（以及随附的JS行）。
2）我设置$toggler以引用复选框本身，并将click处理程序更改为change。我发现标签上的click事件发生了两次，这就解决了这个问题。我对单击处理程序触发两次这一事实感到惊讶，但我的猜测是链接到复选框的标签的行为标准。