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檢查失敗，並且該鏈接正常打開。 我無法一直進行測試，但是應該可以...