OStack程序员社区-中国程序员成长平台

标题: android - CSS :focus automatically opens link on android device [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 18:05
标题: android - CSS :focus automatically opens link on android device

在一个网站上，我将 :hover 用于 web，:focus 用于链接上的触摸设备。但在 android 设备上，如果我触摸链接，它会执行 :focus 但随后会自动打开链接。

它应该做 :focus 并且如果用户再次点击链接，那么它应该打开链接。纯 CSS 可以做到这一点吗？

我有一个我的 :hover 和 :focus 代码的简短示例:

#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
    display:block;
}

在 iOS 上没有问题(在 iOS 上完美运行)。仅在 Android 设备上。

---

Best Answer-推荐答案

您将需要一些 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/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4