Question

我正在开发基于checkbox hack

的响应式css菜单

HTML：

<input type="checkbox" id="button" />
<label for="button" onclick>click / touch</label>

<div>
 Change my color!
</div>

的CSS：

/* Advanced Checkbox Hack */

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

input[type=checkbox] {
 position:absolute;
 top:-9999px;
 left:-9999px;
}

label { 
 cursor: pointer;
 user-select: none;
}

div {
 background-color: #00F;
}

/* checked */
input[type=checkbox]:checked ~ div {
 background-color: #F00;
}

进展顺利，有效的html5并在Windows和Linux桌面（FF，IE，Opera，Konquerer，Chrome，Maxthon）上成功测试，我甚至想出了一个针对IE8的简短（基于JS）的黑客攻击。当我在Android 4.1.1平板电脑上测试时，菜单无法打开，但与IE8不同的问题不是伪类:checked，而是

点击相关的复选框标签不会切换复选框状态和
一个JS快速修复模拟点击设置/取消设置复选框不起作用，因为浏览器看到一个click as two clicks

不适用于android：

$('label').click(function(e) {
 e.preventDefault();
 // alert(navigator.userAgent);
 $("input#button").trigger('click'); 
});

只是为了保持理智，我测试了

$('label').click(function(e) {
 e.preventDefault();
 // alert(navigator.userAgent);
 $("input#button").prop("checked",true); 
});

有效，但当然只设置复选框，永远不会取消设置。

我尝试过JS workaround using timestamps，但无法让它发挥作用。

最令我困惑的是，所述复选框黑客示例适用于所述平板电脑，但我的菜单（未发布）或此简单form with checkboxes不会更改标签点击上的复选框。

任何想法我出错了，或者如何让android 4.1.1设置/取消设置复选框而不在标签内嵌入复选框（我需要多个标签用于同一个复选框）？我可以使用JS解决方案，即使重点是仅使用CSS。感谢

Answer 1

我最终使用了这种解决方法：

$('.touch .menu label').on('tap', function(e) { 
  e.stopPropagation(); 
  e.preventDefault();
  var hID = $(this).prop('for');
  $("input#"+hID).trigger('click'); /* not tap */
});

点击事件源自tocca.js，但也适用于点击。

Android浏览器复选框标签无法点击

1 个答案: