Question

我不确定为什么我找到的这个脚本需要两次点击才能工作。我在div中有一个锚点，当点击时，可以将父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类是页面顶部的标题，它位于画布外，然后在单击锚点时向下滑动。

Answer 1

在clicked = true;函数

的第一行向您的js添加click

从你的代码：

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时触发。

之前只需点击两次，因为首次点击它会执行else阻止设置clicked=true;。因此，在第二次点击中，clicked为true，因此执行if阻止。

Answer 2

FIDDLE

您的默认状态与第一个动画的结果相同。因此，您必须单击两次。更改默认状态：

var clicked = true;

Answer 3

$('.anchor').click(function(){ ..函数放在哪里？

是否在被调用的函数内？如果是，请将其移出被调用的函数。

否则，您可以使用绑定单击事件或使用jQuery实时事件。

Answer 4

我可以在您的代码中看到两个问题：

1。）你忘记了脚本开头的分号

var clicked = false ;缺失

2。）你的目标是.anchor，在你的html中你的目标没有这样的类，只需要一个href，你需要：

<a href="#" class="anchor">click</a>

和cbayram说的一样，你应该将var clicked = false;更改为var clicked = true;

Working Fiddle

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

4 个答案: