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

I have a web page that has three section i.e. Header , Mid, Footer. In Mid div it is again divided into two parts i.e. leftdiv and rightdiv. Leftdiv has vertical menu and right div is for content holder for the respective page.

我有一个网页，有三个部分，即标题，中间，页脚。在Mid div中，它再次分为两部分，即leftdiv和rightdiv。 Leftdiv有垂直菜单，右div用于相应页面的内容持有者。

Now i want to dock leftdiv to left of the window screen on button click and when user again click of the same button the leftdiv should set as original position.

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

ex: if left and right div area has respectively 30 : 70 % area of main div. when i click on button the left and right div area should like 10:90 % and clicking again both div gets their original ratio.

例如：如果左右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;
    });
}

Any help will be appreciated.Thanks in advance

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

1 个解决方案

#1

Since you tagged jquery in your question:

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

HTML code

HTML代码

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

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

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

CSS code

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 code

Javascript代码

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

See it in action: http://jsfiddle.net/9xr46zqt/

看到它在行动：http：//jsfiddle.net/9xr46zqt/

EDIT

To animate, use CSS transition property on the divs:

要设置动画，请在div上使用CSS过渡属性：

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

See updated fiddle with animation: http://jsfiddle.net/9xr46zqt/1/

看动画的更新小提琴：http：//jsfiddle.net/9xr46zqt/1/

If course, you can specify anything in both the .switch and non-switched classes. If you want to animate those as well, list their properties in the transition, like: transition: width, left, color 0.25s ease-in-out, or use transition: all 0.25s ease-in-out.

如果是课程，您可以在.switch和非切换类中指定任何内容。如果你想为它们设置动画，请在转换中列出它们的属性，例如：transition：width，left，color 0.25s ease-in-out，或者使用转换：所有0.25s轻松进入。

1 个解决方案

#1

EDIT

更多相关文章

随机推荐