jquery - jQuery 变量在函数之外不会改变

Question

我正在使用以下代码在按下 .sidebar-toggle 时显示侧边栏，并在按下 #page 时隐藏侧边栏。

显示侧边栏效果很好，但在按下#page 时它不会隐藏。单击 .sidebar-toggle 时，该变量似乎未设置为 1。

var state = 0;

if (state === 0) {
    $('.sidebar-toggle').click(function() {
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
    });
}

if (state === 1) {
    $('#sidebar').click(function() {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    });
}

Answer 1

您忘记使用#page click.function ...最好的方法是将if放入click.function ...尝试这种方式

var state = 0;

$('.sidebar-toggle').click(function() {
    if (state===0) {    
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
    }    
});

$('#page').click(function() {
    if (state===1){
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    }
});

Answer 2

可能是因为这从未执行

if (state === 1) {
    $('#sidebar').click(function() {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    });
}

试试这个方法——

var state = 0;
    $('.sidebar-toggle').click(function() {
       if (state === 0) {
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
       }
    });

    $('#page').click(function() {
       if (state === 1) {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
       }
    });