我正在开发基于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
,而是
不适用于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。感谢
答案 0 :(得分: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,但也适用于点击。