我如何使我的JQuery .on（'click'，）多次使用？

Question

我正在尝试创建一个滑动弹出窗口，您可以在其中单击标签以滑动并显示内容，然后再次单击同一标签以隐藏内容。我正在使用JQuery为div类设置动画，但是动画仅通过单击一次触发。我进行了测试，并且两个功能都可以正常工作，但是一旦以一种方式触发，就不会再次触发。这是JavaScript，这些函数嵌套在if语句中：

$(document).ready(function(){
    var listSlide = $(".tutor-list").css("top");
    (listSlide === "0px")? $(document).on('click', '#list-slide', function(){
            $(".tutor-list").animate({top: "200px"});
        }) : $(document).on('click', '#list-slide', function(){
            $(".tutor-list").animate({top: "0px"});
        }); 
}); 

我对Java语言非常陌生，因此问题可能出在语法错误或某些基本缺陷上，但我找不到它的问题所在。

Answer 1

您仅在文档准备就绪时绑定一次单击事件。因此，if/else部分之一未绑定。您可以按以下方式将if/else块移到click绑定中：

$(document).ready(function() {
    $(document).on('click', '#list-slide', function() {

        var listSlide = $(".tutor-list").css("top");

        if (listSlide === "0px") {
            $(".tutor-list").animate({top: "200px"});
        } else {
            $(".tutor-list").animate({ top: "0px"});
        }

    });

});

Answer 2

您的代码的问题是，您正在检查top属性的initial状态。然后，根据initial top属性绑定单击。

您要使用current top属性。当用户单击#last-slide时，此属性更改。因此，您需要检查click回调中的状态，然后根据此值进行处理。

$(document).ready(function(){
    $(document).on('click', '#list-slide', function(){
        var top = parseFloat($(".tutor-list").css("top"));
        if(top == 0){
            $(".tutor-list").animate({top: "200px"});
        }
        else{
            $(".tutor-list").animate({top: "0px"});
        }
    }); 
}); 

请注意，实际上并不需要parseFloat()。我只是不知道jQuery.css("top")的返回值是字符串还是数字。

此外，您还可以将点击绑定功能更改为以下内容：

$(document).ready(function(){
    $('#last-slide').on('click', function(){
        // ...
    });
});

我个人更喜欢这种方式，因为它对我来说看起来更好。请注意，第一种方法（由您使用）将事件绑定到文档，然后进行过滤，这意味着通过js / ajax重新加载内容将keep功能。这可能是有意的，但也可能不是有意的（也许您正在重新初始化页面）。