在网站上,我在链接上使用 :hover
和 :focus
作为触摸设备。但是在 Android 设备上,如果我触摸链接,它会执行 :focus
但随后会自动打开链接。
它应该执行 :focus
并且如果用户再次点击链接,那么它应该打开链接。这可以用纯 CSS 实现吗?
我得到了一个关于我的 :hover
和 :focus
代码的简短示例:
#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
display:block;
}
在 iOS 上没有问题(在 iOS 上完美运行)。仅适用于 Android 设备。
最佳答案
您将需要一些 javascript(jQuery,它已包含在您的站点中)和 Modernizr以确定用户是否在触摸屏设备上。还有其他方法可以检查触摸,但我认为 Modernizr 会给你带来最好的结果。
所以首先包括 Modernizr。您可以从他们的网站下载它或使用像 cdnjs.com 这样的 cdn
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
之后,将此 javascript 添加到您的站点:
$(document).ready(function(){
if(Modernizr.touch){
$('#menu-mainmenu').on('click', '> li', function(e){
if(!$(this).data('open')){
e.preventDefault();
}
$(this).data('open', true);
});
}
});
因此,如果您在触摸设备上单击主菜单项,则会弹出子菜单(由于 :focus
样式)但由于 e.preventDefault 链接被阻止()
。然后数据值“open”设置为 true,因此如果用户再次点击链接,if 检查失败并且链接正常打开。我无法一直测试它,但它应该可以工作...
关于android - CSS :focus automatically opens link on android device,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21206971/