CODEWITHSUNDEEP
jquerymenutoggle
Jeff Voss
Jeff Voss

Reputation: 3695

jQuery slideToggle menu that will collapse if

anything except the link and the body of the exposed div are clicked after the event is fired and only after the event is fired

$(function() {
    $('#engageNetwork').bind('click', function() {
        $('.topNavSlide').stop(true,true).slideToggle(1000, 'easeOutExpo');
        $('a').click(function() {
            $('.topNavSlide').stop(true,true).slideToggle(500, 'easeOutExpo');
        });
    });
});

Upvotes: 0

Views: 714

Answers (1)

dvir
dvir

Reputation: 5115

You can use the :not selector in order to bind the rest of the document click handler that will collapse the menu. The selector and the binding is something like:

$(":not(#engageNetwork, #engageNetwork *)").bind("click", function(){
   $('.topNavSlide').stop(true,true).slideUp(1000, 'easeOutExpo');
});

(the second reference to #engageNetwork with the asterisk is in place to make sure any elements under the #engageNetwork won't be binded with this event handler.)

Upvotes: 1

Related Questions