3

Proto.io 为使用 CSS 的开/关按钮提供了一个非常好的解决方案。但是，它在 IE8 中不起作用。 http://proto.io/freebies/onoff/

有谁知道怎么用js解决？或者是否有任何其他可以在 IE8 中使用的开/关按钮解决方案？

4

2 回答 2

13

感谢您使用我们的Proto.io 翻转开关:)

下面介绍如何使用 javascript 启用对 IE8 的支持。

您需要做的是添加 css，它将根据“onoffswitch-checked”类更改翻转开关的状态，然后在单击翻转开关时使用 javascript 切换该类。

首先在css中添加这两个声明：

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

然后，根据复选框是否被选中，使用 javascript 来切换“onoffswitch-checked”类：

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

此外，如果您选择了“默认开启”选项，请确保将“onoffswitch-checked”类添加到您的 html 中：

<div class="onoffswitch onoffswitch-checked">

笔记：

有一种更简洁的方法可以使用复选框上的 change() 事件而不是标签上的 click() 事件来实现这一点，但不幸的是，当单击标签而不是复选框时，IE8 不会触发 change() 事件。

最好在复选框上而不是在父级上触发选中的类，但是 IE8 在更改类时不会刷新相邻的兄弟 CSS ( + ) :(

于 2013-05-08T13:54:17.617 回答
2

Proto.io 页面提到“...IE8 不支持 CSS :checked 选择器”因此不受支持。这意味着你可以通过为 IE 添加一个 polyfill 来解决这个问题，例如selectivizr。

编辑：Proto.io 页面还提到（通过浏览器图标列表上的 IE 工具提示）可以通过一些添加的 Javascript 支持 IE8。此代码已在此开关的实际作者anna.mi的答案中提供。

于 2013-01-09T21:59:49.033 回答