如何隐藏菜单？ （不是'切换'）

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);
});