如何让我的 JQuery .on('click', ) 工作不止一次？

Question

我正在尝试创建一个滑动弹出窗口，您可以在其中单击标签以滑动并显示内容，然后再次单击同一标签以隐藏内容。我正在使用 JQuery 来设置 div class 的动画，但动画只会被点击一次触发。我测试过，这两个功能都有效，但是一旦以单向方式触发，就不会再次触发。这是 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"});
        }); 
});

我是 Javascript 的新手，所以问题可能出在语法错误或某些基本缺陷上，但我找不到问题所在。

Answer 1

您的代码存在问题，您正在检查顶部属性的初始状态。然后你根据initialtop属性绑定点击。

您想使用当前顶部属性。当用户单击 #last-slide 时，此属性会发生变化。因此需要在点击回调中检查状态，然后根据这个值进行处理。

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

.wrapper{
  overflow: hidden;
  height: 200px;
  border: 1px dotted #000;
  position: relative;
}

.tutor-list{
  background: #ccccff;
  border: 1px dashed #000;
  position: absolute;
  top: 200px;
  min-height: 50px;
  padding: 10px;
}

<html>
  <body>
    <button id="list-slide">Toggle list</button>
    <div class="wrapper">
        <div class="tutor-list">This is the list</div>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

请注意 parseFloat() 并不是真正需要的。 ~~我只是不知道 jQuery.css("top") 的 returned 值是字符串还是数字。~~ 在 j-Query docs 中我找不到return jQuery.css() 函数的类型。它说它使用 "computed style" 取决于浏览器。关于计算样式，文档说：

[C]omputed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

所以我假设 top 属性也可能有不同的 return 值。因此，为了完全跨浏览器，我总是使用 parseFloat() 函数。此外单位在这里并不重要。它是 0px、0em 还是 0 都没有关系。（请注意，对于其他情况，它确实很重要。1px 不等于 1em。对于这种情况，请使用 jQuery.offser().top 总是 returns px.)

我不知道您的确切设置，但您可能还想检查一下 jQuery.hide()。此功能隐藏您的列表。 jQuery.hide() 可以接受动画参数，所以你最终会得到相同的结果。我个人更喜欢 jQuery.hide() 函数，因为它改变了 css display 属性。这样元素不会在 space 中的某个地方结束，但它被定义为不可见。我认为这是更好的解决方案。

您也可以将点击绑定功能更改为以下内容：

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

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

Answer 2

您只绑定一次点击事件，并且仅在文档准备就绪时绑定。因此，其中一个 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"});
        }

    });

});

如何让我的 JQuery .on('click', ) 工作不止一次？

How do I make my JQuery .on('click', ) work more than once?

javascript

jquery

animation

if-statement

click