javascript - 如何隐藏菜单？（不是“切换”）

Question

我有一个页面，由两层组成：'layer1' 是一个菜单，它有 z-index: 1; 'layer2' 充满了内容，它的 z-index: 2。

我正在尝试这样做：当您点击箭头图片时，“layer2”向右移动（例如，200px），在屏幕后面。我不知道我的代码在这种情况下是否正确，但这就是我使用的：

    $('#arrow').click(function() {
        $(this).animate({
            marginRight: '+=200'
            }, 500);
        $('#layer2').animate({
            marginLeft: '+=200'
        }, 500)});

当您第二次按箭头时，如何使“layer2”向后移动？

Answer 1

跟踪状态，这可以更好地编码，但这是基本思想。

$('#arrow').click(function() {
    var elem = $(this);
   var state = elem.data("state") || "closed";
   var dir = (state === "open") ? "-" : "+";
   elem.data("state", state === "open" ? "closed" : "open");
   elem.animate({
        marginRight: dir + '=200'
        }, 500);
   $('#layer2').animate({
        marginLeft: dir + '=200'
    }, 500);
});