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