javascript - 当 ul 可见时将事件附加到主体，然后在不可见时将其删除

Question

我有一个 <ul>单击时，切换另一个 <ul> 的可见性. <ul> 时如何将事件附加到页面正文？显示 s 以便 body 隐藏 <ul> .

我刚开始写这些冒泡的东西，我不明白为什么我到目前为止所做的似乎断断续续地工作。多次点击，添加类open失败中学时<ul>被打开。

当然，可能有更好的方法来做到这一点。

$(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

我建议不要在点击事件中绑定(bind)点击事件，即使您正在解除绑定(bind)。相反，我会这样做:

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");
        })
    }
});​

如果您需要进一步防止单击打开的菜单关闭菜单，请添加一个 else if 测试该菜单的子项。