切换功能不起作用

Question

我有这个div（以块的形状），我想通过点击它来左右移动。这个想法是第一个切换动作起作用（意味着块从左侧占据250px的空间），但在我再次点击它之后不会向左移动。

$(document).ready(function()
{

    $("#block1").click(function()
    {
        var toggleState = true;
        if (toggleState)
        {
            $("#block1").animate({left: '250px'});
        }
        else
        {
            $("#block1").animate({left: '250px'});
        }
        toggleState = !toggleState;
    });
});

Answer 1

您需要在click函数之外定义toggleState，否则会不断覆盖其值。我还使用空值定义了变量并更改了true条件左值，但这些都不是您的主要问题。

var toggleState;

$("#block1").click(function() {
    if (toggleState) {
        $("#block1").animate({
            left: '10px'
        });
    } else {
        $("#block1").animate({
            left: '250px'
        });
    }
    toggleState = !toggleState;
});

<强> Demo

Answer 2

你需要在函数内部使用toggleState变量将它移到外面。