javascript - jQuery click 函数同时触发

Question

我有两个似乎同时触发的点击功能。我需要第二个只在第一个之后发生。

因此，第一个 SlideDown 工作正常，但一旦完成，我希望它停止，然后单击 .close 类时发生的 SlideUp。

$(".trigger").click(function() {
    $(".mobileWrap").slideDown(500);
    $(".mainContentBg").addClass("height", 1000);
    $(".trigger").text("Read less");
    $(".trigger").addClass("close");
    $(".close").removeClass("trigger");
});
$("body").on("click", ".close", function() {
    $(".mainContentBg").removeClass("height", 1000);
    $(".mobileWrap").slideUp(1000);
    $(".trigger").addClass("trigger");
    $(".trigger").text("Read more");
});

http://jsfiddle.net/6hvZT/648/

谢谢

Answer 1

您的代码有问题:

随着close类的添加，委托(delegate)点击被触发。

<强> Updated Fiddle

如果您希望切换More-Less；您可以只使用toggleClass和slideToggle而不是两个不同的点击事件，slideUp/SlideDown 和 addClass/removeClass。

下面是缩短的代码。

$(".trigger").click(function() {
    $(".mobileWrap").slideToggle(500);
    $(".mainContentBg").toggleClass("height", 1000);
    $(".trigger").text(function(){
        return this.innerText === "Read less"? "Read more":"Read less"
    });
});

此外，如果您有多个此类实例，则在处理程序内最好使用 $(this) 而不是 $('.trigger')