2

这是代码，我什至不确定它为什么能像现在这样工作，第 7 行甚至无效我不认为，所以为什么它做我想要的（它将不透明度降低到 0灯箱并删除 loginDropDown 元素）？真正让我困惑的是为什么当我删除第 7 行时它的功能不一样，当第 7 行甚至不是有效的 JQuery 我只是偶然输入它时，这是一个错误，如果是，我该如何得到它功能与有效代码相同吗？

function lightBox($this) {
    if (!$('#lightBox').length > 0) {
        $('<div id="lightBox"></div>').prependTo($this);
        $("#lightBox").animate({opacity: '.4'}, 500);
    } else {
        $("#lightBox").animate({opacity: '0'}, 500);
        $('<div id="lightBox"></div>').delete();
    }
}


/** login dropdown **/
$('a#loginDropdownBtn').click(function () {
    $this = $(this);
    if ($(this).hasClass('loginActive')) {
        $('div#loginDropdown').removeClass('loginActive');
    } else {
        $('div#loginDropdown').addClass('loginActive');
        lightBox($this);
    }
    return false;
});

/** login removal **/
$(document).click(function (event) {
    if ($(event.target).parents().index($('#loginDropdown')) == -1) {
        if ($('#loginDropdown').is(":visible")) {
            $('div#loginDropdown').removeClass('loginActive');
        }
    }
})

编辑：如果我使用-

        $('div#loginDropdown').removeClass('loginActive');
        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });

作品！然而 -

        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });
        $('<div id="lightBox"></div>').delete();

工作正常...为什么？这是有效的代码吗，我找不到任何表明它的东西。

4

2 回答 2

2

您需要使用回调函数。像这样：

$(document).ready(function () {
    $("#clickMe").click(function () {
        $("#lightBox").animate({opacity: '0'}, 500, function(){$(this).remove()});
    });
});

小提琴：http: //jsfiddle.net/vpbKe/

编辑

更改代码以删除登录下拉列表：

$("#lightBox").animate({opacity: '0'}, 500, function(){
    $(this).remove();
    $('div#loginDropdown').removeClass('loginActive');
});
于 2013-08-28T21:09:51.140 回答
1

澄清为什么它适用于第 7 行（我最好说“第 7 行会发生什么”）

末尾$('a#loginDropdownBtn').click()是一个return false. 当此函数返回时false，它将阻止click为文档触发 -event。

但是这个函数不会返回false，因为发生的错误lightBox()会阻止$('a#loginDropdownBtn').click().

如何在没有故障线 #7 的情况下获得相同的行为？去掉return false末尾的$('a#loginDropdownBtn').click().

于 2013-08-28T21:33:43.780 回答