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检查失败并且链接正常打开。我无法一直测试它，但它应该工作......

CSS：焦点自动打开Android设备上的链接

1 个答案: