jquery - 不确定为什么这需要点击两次才能工作

Question

我不确定为什么我找到的这个脚本需要点击两次才能工作。？我在一个 div 中有一个 anchor ，当点击它时，它会向下动画父 div，但似乎需要两次点击该链接才能工作。这很可能是一个愚蠢的问题，但我不编写代码，我只是一名设计师。

谢谢

var clicked = false

$('.anchor').click(function () {
    if (clicked == true) {
        $(".div").animate({ top: '0px' }, 600);
        clicked = false;
    } else {
        $(".div").animate({ top: '-90px' }, 600);
        clicked = true;
    }
});

HTML:

<header class="div">
    <div>
      some stuff in here
    </div>
    <a href="anchor"></a>
</header>

div 类是位于 Canvas 之外的页面顶部的标题，然后在单击 anchor 时向下滑动。

Answer 1

在 click 函数的第一行添加 clicked = true; 到你的 js

来自您的代码:

var clicked = false

$('.anchor').click(function () {
    clicked = true;
    if (clicked == true) {
        $(".div").animate({
            top: '0px'
        }, 600);

        clicked = false;
    } else {
        $(".div").animate({
            top: '-90vh'
        }, 600);
        clicked = true;
    }

});

因为 .click() 仅在单击 .anchor 时触发。

之前需要点击两次，因为第一次点击它会执行设置 clicked=true; 的 else block 。所以在第二次点击时，clicked为true，所以它执行了if block 。