垂直扩展div

Question

我有两个DIV

一个在右侧，另一个在左侧

我正在寻找一个给我链接的代码，通过点击此链接，两个div将扩展到100％（意味着其中一个将向下滑动）并再次点击它们将返回并排

我试过了：

<style>
#container {
   width:100%;
   height:500px;

}
#left {

    width:45%;
    height:500px;
    float: left;
}
#right {

    width:45%;
    height:500px;
    float: left;
}
</style>

<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>  


<div id="container">
      <div id="left">
       LEFT
    </div>

      <div id="right">
        RIGHT 
    </div>
</div>

<script>
$('#container').click(function(){
        if (parseInt($('div#right').css('right'),10) < 0) {
                 // Bring right-column back onto display
                  $('div#right').animate({
                      right:'0%'
                  }, 1000);

                  $('div#left').animate({
                    width:'45%'
                  }, 600);
                } else {

        // Animate column off display.
                  $('div#right').animate({
                      right:'-45%'
                  }, 600);

                  $('div#left').animate({
                    width:'100%'
                  }, 1000);
        }

});
</script>

Answer 1

你可以使用jQuery切换，为你的puspose。

看看这个Example