Question

我的网页有三个部分，即Header , Mid, Footer. 在Mid div中，它再次分为两部分，即leftdiv和rightdiv。 Leftdiv有垂直菜单，右边div用于相应页面的内容持有者。

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

例如：如果左右div区域有respectively 30 : 70 % area of main 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;
    });
}

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

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

请参阅动画的更新小提琴：http://jsfiddle.net/9xr46zqt/1/

如果是课程，您可以在.switch和非切换课程中指定任何。如果您想要为这些设置制作动画，请在transition中列出其属性，例如：transition: width, left, color 0.25s ease-in-out，或使用transition: all 0.25s ease-in-out。

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

1 个答案:

修改