垂直扩展的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