这个开关按钮如何通过CSS工作？

Question

任何人都可以解释一下很酷的打开/关闭开关按钮是如何工作的吗？http://proto.io/freebies/onoff/

我想设置一个预防检查，看看用户是否真的想切换按钮。如

$(document).on('change', '.onoffswitch',function(event){...

http://jsfiddle.net/aGZ7Y/2/

如您所见，更改事件已触发但未停止切换行为。

这只是通过纯css完成的。 我甚至不知道为什么在点击按钮后会触发更改。 （因为我发现复选框已设置为display：none）

非常感谢。

Answer 1

您可以做的基本上是删除触发时更改ON / OFF的CSS代码，并将它们添加到您的JQuery代码中。 您已经在JQuery中捕获事件，现在只需从代码中相应地更改CSS。

复选框已设置为display:none;以隐藏原始复选框（这个带有勾号的丑陋灰色框...）。 最重要的是（在display:none;上）我们正在“构建”新的自定义...

Answer 2

您还需要在标签元素上使用click处理程序，而不是在div元素

中

更改值后会触发change event，因此它不是可取消的事件。

$(document).on('click', '.onoffswitch-label', function (event) {
    if (!confirm("sure to switch?")) {
        return false;
    }
});

演示：Fiddle