CODEWITHSUNDEEP
jqueryslidedownslideup
Guy
Guy

Reputation: 357

Jquery: Click slideUp Issue

I have a JQuery navigation which on clicking a parent <li> slides down using JQuery. On a second click it will slide the navigation up. The problem I have is that my clients wants it also to slide back up if he clicks somewhere else on screen, i.e just clicking on blank white space would collapse the nav.

Any ideas?

Here is the Jquery:

$('#menu-flag-menu > li > a').click(function(e) {e.preventDefault();});


$("#menu-flag-menu li a").click(function(){ 

    // close all opened sub menus
    $("ul", $(this).parent().siblings()).stop(true,true).slideUp();

    var ul = $(this).next("ul");     
    ul.stop(true,true).slideToggle('fast'); 
});

Upvotes: 4

Views: 648

Answers (2)

karim79
karim79

Reputation: 342695

This should work:

$(document).click(function (e) {

    // if we click on anything other than the navigation menu
    // or it's descendants then slide up the menu
    if(e.target.id !== "menu-flag-menu" 
        && !$(e.target).closest("#menu-flag-menu").length) {
        $(".sub-menu").stop().slideUp();
    }
});

Upvotes: 3

Paul Osborne
Paul Osborne

Reputation: 1570

My advice would be to try using the .mouseenter event to open the menu and the mouseleave event to close the menu.

Upvotes: 0

Related Questions