CODEWITHSUNDEEP
javascriptjqueryclickstoppropagation
rob.m
rob.m

Reputation: 10601

stop propagation

I have a panel which opens and closes to display the menu by clicking an element with class .open. When I first click it, it's fine, the panel opens up. Once the panel is open, I click on a menu Item and the panel closes.

The issue I am facing is that once the panel is closed after clicking on the menu item, I need to hit twice .open before the panel opens again.

I first run this:

$(".open").toggle(function(){
   $(".header").animate({height:"100%"},200);
   },function(){
        $(".header").animate({height:50},200);
});

This opens up a panel, with a menu, then when I click on a menu item i do:

$(".navMore li a").on("click", function(e) {
   e.preventDefault();
    ...

Is it an issue with propagation? Adding:

$(".navMore li a").on("click", function(e) {
   e.preventDefault();
   e.stopPropagation();

Still leaves me with the same issue.

Upvotes: 1

Views: 174

Answers (1)

Alex W
Alex W

Reputation: 38253

The click event bubbles up in JQuery. To prevent that you need to stop propagation from bubbling up on the lower element and stop the higher element's handler from firing.

In the $('.open') function you need to put the following:

$(".open").toggle( function( event ) {
    if( !$( event.target ).is("a") )
        {
            $(".header").animate({height:"100%"},200);
        }
},....);

Upvotes: 1

Related Questions