How to untoggle a dropdown by clicking elsewhere in the page - stopPropagation?

Question

I wonder if anyone can help to finally resolve an issue I brought up on SO a while back.

I am unable to untoggle these dropdown menus by clicking outside of the button, or anywhere else on the page.

Please see this jsFiddle.

I've seen folks using stopPropagaton() but am unsure how to apply it here.

Any ideas how to do this?

My toggling code:

var cur = null;
$(".toggle").click(function(e){
    $('#nav ul:visible').hide();

    if(cur == null || cur.currentTarget != e.currentTarget)
    {
        if(cur != null)
        {
            $(cur.currentTarget)
                .children('a:first').children('span').removeClass('fc-state-active');
        }

        cur = e;
        $(cur.currentTarget)
            .children('a:first').children('span').addClass('fc-state-active');
        $(cur.currentTarget)
            .children('ul').show();
    }
    else
    {
        $(cur.currentTarget)
            .children('a:first').children('span').removeClass('fc-state-active');

        cur = null;
    }
});

The best solution I found is [stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element). I don't think any other solution would be soo simple. — lightofsouls, Jun 28 '13 at 08:34

drfranks3 · Accepted Answer · 2011-07-04T17:07:35.070

4

I believe the following should work for you. This utilizes jQuery's focusout() function:

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
}).focusout(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
});

And here's an updated fiddle: jSFiddle

EDIT: The following works in FF & Chrome New Fiddle: jsFiddle

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
    hide = false;
}); 
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});

Reason: $(document).click() is called after $(".toggle").click()

EDIT 2: The working fiddle can be found here: jSFiddle

var hide;
$(".toggle").click(function(){
    var active_span = $(this).children('a:first').children('span');   
    var active_ul = $(this).children('ul');

    $(active_span).toggleClass('fc-state-active');
    $("span.fc-state-active").not(active_span).removeClass('fc-state-active');
    $(active_ul).toggle();
    $("#nav ul:visible").not(active_ul).hide();
    hide = false;   
});
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});

edited Jul 04 '11 at 17:07

answered Jul 03 '11 at 16:08

drfranks3

667
8
21

@D Franks, this does not seem to work on Chrome (works on FF) - any idea why? – pepe Jul 03 '11 at 16:15
It seems Chrome doesn't like to fire focusout(). I'm currently looking for a fix for that. – drfranks3 Jul 03 '11 at 16:25
Found the solution. It's doesn't use the focusout() function, but it works on both FF and Chrome. – drfranks3 Jul 03 '11 at 16:54
@D Franks - new solution allows closing when clicking outside the button -- but I can't close the menu *when clicking the button* - BTW thanks for your awesome help on this – pepe Jul 03 '11 at 18:02
Wow, sorry for all the confusion! The new fiddle above works in Chrome and FF, hides when clicking outside the nav, and toggles visibility when clicking an active element. – drfranks3 Jul 03 '11 at 18:45
hey no problem - do you mean the fiddle http://jsfiddle.net/znhAC/2/ -- this one still does not close menu on button click -- were you referring to another (newer) fiddle? – pepe Jul 03 '11 at 18:50
@D Franks - 1 more thing, looks like when I click on other elements of the page, like an unrelated button, your code triggers the `$(document).click...` part generating an error: `hide is not defined` - any idea how to resolve this? – pepe Jul 04 '11 at 13:15
I see, add `var hide;` above `$(".toggle").click...` – drfranks3 Jul 04 '11 at 17:06

How to untoggle a dropdown by clicking elsewhere in the page - stopPropagation?

1 Answers1