Question

I have a navigation with dropdown menus that, on a computer browser, appears on hover (CSS3/jQuery for the effect) and when hovered out, it disappear. Although, it also detects if the user is on an iPad/iPhone and if so, displays the dropdown only when the user clicks the menu item. So let’s say I have a “Services” navigation menu, on a computer the submenu of Services will appear on hover, and on mobile on click.

Although on the mobile, the menu doesn’t close unless the user clicks another menu item / link on the page. What I would like is for the menu to disappear when the user clicks elsewhere on the page or even better, when he scrolls down the page. (if there’s a better way, let me know)

So yeah, here’s my actual code (for the mobile)

$("#generale > li").click(function(){
    $('ul:first',this).css("display", "block");

    // Hover that needs to be changed 
    $("#generale > li").hover(function(){}, 
    function(){
        $('ul:first',this).fadeOut(200);
    }); 

}); 

Basically it stills checks the hover out, but that’s where I’d need a better solution since there’s no hover on mobile.

Thanks for the help!

Answer 1

If you use jq 1.7+ then try this DEMO HERE http://jsfiddle.net/SCN5T/3/

$(function(){
    $(document).mousedown(function(){
         $('.dropdown .active').removeClass('active').children('ul').hide();
    })
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
             $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();
        alert('menu item clicked');
    });       
})