Javascript 将一个div停靠在窗口左侧，然后再次单击到原始位置

我的网页有三个部分，即页眉、中间部分和页脚。 在中间div中，它又分为两部分，即leftdiv和rightdiv。Leftdiv具有垂直菜单，而right div用于相应页面的内容保持器

现在我想在点击按钮时将leftdiv停靠在窗口屏幕的左侧，当用户再次点击同一按钮时，leftdiv应设置为原始位置

例如：如果左侧和右侧

div

区域分别有

30:70%的主div

区域。当我点击按钮时，左边和右边的div区域应该是

10:90%

，然后再次点击这两个div得到它们的原始比率

var checker = new Boolean();
checker = true;
if (checker = true) {

    $("#Test").click(function() {

        $('.left-wrap').animate({
            left: "10%"
        }, 400);
        checker = false;
    });
}
if (checker != true) {
    $("#Test").click(function() {
        $('.left-wrap').animate({
            left: "30%"
        }, 400);
        checker = true;
    });
}

---

任何帮助都将不胜感激。请提前感谢，因为您在问题中标记了jquery：

HTML代码

<div class="toggle left">
    Menu
</div>

<div class="toggle right">
    Page contents
</div>

<button id="switch">Big monster!</button>

div.toggle {
    float: left;
    padding: 20px;
    box-sizing: border-box;
}

div.left {
    width: 30%;
    background-color: #f00;
}

div.right {
    width: 70%;
    background-color: #0f0;
}

div.left.switch {
    width: 10%;
}

div.right.switch {
    width: 90%;
}

$(document).ready(function () {
    $('#switch').on('click', function () {
        $('div.toggle').toggleClass('switch');
    });
});

Javascript代码

<div class="toggle left">
    Menu
</div>

<div class="toggle right">
    Page contents
</div>

<button id="switch">Big monster!</button>

div.toggle {
    float: left;
    padding: 20px;
    box-sizing: border-box;
}

div.left {
    width: 30%;
    background-color: #f00;
}

div.right {
    width: 70%;
    background-color: #0f0;
}

div.left.switch {
    width: 10%;
}

div.right.switch {
    width: 90%;
}

$(document).ready(function () {
    $('#switch').on('click', function () {
        $('div.toggle').toggleClass('switch');
    });
});

在行动中看到它：

---

编辑 要设置动画，请在divs上使用CSS

transition

属性：

div.toggle {
    transition: width 0.25s ease-in-out;
}

请参见更新的小提琴动画：

---

当然，您可以在

.switch

和非切换类中指定任何内容。如果你想给它们设置动画，请在

过渡

中列出它们的属性，比如：

过渡：宽度、左侧、颜色0.25s缓入缓出

，或者使用

过渡：所有0.25s缓入缓出
，你到目前为止尝试了什么？我再次更新了我的问题。为什么要对这个问题投反对票？？我恳请在座的选民也评论一下原因。否则，由于对投票结果的恐惧，新手将永远不会采取主动。你的理由将提高他们正确提出问题的能力。