javascript - 将 div 停靠到窗口左侧并再次单击到原始位置

Question

我有一个网页，包含三个部分，即页眉、中间、页脚。 在 Mid div 中，它再次分为两部分，即 leftdiv 和 rightdiv。左侧 div 有垂直菜单，右侧 div 用于相应页面的内容容器。

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

例如:如果左右 div 区域分别具有 主 div 的 30 : 70 % 区域。当我单击按钮时，左右 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;
    });
}

任何帮助将不胜感激。提前致谢

Answer 1

由于您在问题中标记了 jquery:

HTML 代码

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

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

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

CSS代码

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

Javascript代码

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

查看实际效果:http://jsfiddle.net/9xr46zqt/

---

编辑

要制作动画，请在 div 上使用 CSS transition 属性:

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

查看更新的动画 fiddle :http://jsfiddle.net/9xr46zqt/1/

当然，您可以在 .switch 和非切换类中指定任何内容。如果您也想对它们进行动画处理，请在 transition 中列出它们的属性，例如:transition: width, left, color 0.25s escape-in​​-out，或使用 过渡:全部 0.25 秒缓入缓出。