Question

I have a <ul> that when clicked, toggles the visibility of another <ul>. How can I attach an event to the body of the page when the <ul>s are revealed so that the body will hide the <ul>.

I am new to writing these sorts things which bubble, and I cannot figure out why what I have done so far seems to work intermittently. When clicked several times, it fails to add the class open when the secondary <ul> is opened.

And of course, there may be an entirely better way to do this.

$(document).on('click', '.dd_deploy', function (e) {
    var ul = $(this).children('ul');
    var height = ul.css('height');
    var width = ul.css('width');
    ul.css('top', "-" + height);
    ul.fadeToggle(50, function () {

        //add open class depending on what's toggled to
        if (ul.hasClass('open')) {
            ul.removeClass('open');
        } else {
            ul.addClass('open');
        }
        //attach click event to the body to hide the ul when
        //body is clickd
        $(document).on('click.ddClick', ('*'), function (e) {
            e.stopPropagation();
           //if (ul.hasClass('open')) {
                ul.hide();
                ul.removeClass('open')
                $(document).off('click.ddClick');
           // }
        });
    });
});​

http://jsfiddle.net/JYVwR/

Answer 1

I’d suggest not binding a click event in a click event, even if you are unbinding it. Instead, i would do it this way:

http://jsfiddle.net/JYVwR/2/

$(document).on('click', function (e) {
    if ( $(e.target).is(".dd_deploy") ) {
        var ul = $(e.target).children('ul');
        var height = ul.css('height');
        var width = ul.css('width');
        ul.css('top', "-" + height);
        ul.fadeToggle(50, function () {

            //add open class depending on what's toggled to
            if (ul.hasClass('open')) {
                ul.removeClass('open');
            } else {
                ul.addClass('open');
            }
        });
    }
    else {
        $('.dd_deploy').children('ul:visible').fadeOut(50,function(){
            $(this).removeClass("open");
        })
    }
});​

If you need to further prevent clicking on the opened menu from closing the menu, add an else if that tests for children of that menu.