Faça menus suspensos CSS funcionarem em dispositivos de toque

Os menus suspensos CSS são bem legais, mas geralmente dependem de :hoverdispositivos de toque não suportam estados de foco. Portanto, este pedaço de JQuery permitirá que você use cliques em vez de pairar.

//Allow clicking instead of hover for dropdown menus
$(document).ready( function(){

    $('#submenu').click( function(event){
        event.stopPropagation();
        $('#drop').toggle();
    });

    $(document).click( function(){
        $('#drop').hide();
    });

});

Este script assume marcação semelhante a esta:

<a href="#" id = "submenu">Products</a>
        <ul id = "drop" >
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Thingamabobs</a></li>
            <li><a href="#">Doohickies</a></li>
        </ul>

Respostas relacionadas:

jQuery: Quando usar $ (document) .ready () e quando $ (window) .load ()