CSS：focus自动在Android设备上打开链接

Question

在网站上，我将: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设备上。

Answer 1

您将需要一些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检查失败，并且该链接正常打开。 我无法一直进行测试，但是应该可以...