JavaScript에서 "최대화"버튼을 구현하려면 어떻게해야합니까?

Question

두 개의 내부 DIV가있는 한 개의 상위 DIV가 있으며, 각각 두 개의 DIV가 화면의 50 %를 차지합니다. 제안을 찾고 달성하기 위해 다음

나는 것

• 상기 버튼이 부모의 100 % 폭으로 클릭 한 된 DIV의 폭을 설정합니다 그 내부 된 DIV, 각각 '버튼을 극대화' DIV, 다른 하나는 보이지 않게합니다.

jQuery Resizable은 약간의 차이가 있다고 생각합니까? 이미 jQuery를 사용하는 경우

Answer 1

, 당신은 할 수있다 : 첫째 모두 내부 된 div를 숨길

$(".innerDiv").click(function() { 
    $(".innerDiv").hide(); 
    $(this).css("width", "100%").show(); 
}); 

후 100 %로 클릭 사업부의 CSS를 변경하고을 보여줍니다.

당신은 심지어 조금 주스를에 .animate에 .css을 바꿀 수

Answer 2

를 선택할 수있는 약간의 CSS로 볼 수있는 요소을 설정하여 : 어쩌면 가장 효율적인 방법하지만 (작동합니다. 부모 요소의 클래스

CSS :.

<style type="text/css"> 
#Parent.both .left { float: left; width: 50%; } 
#Parent.both .right { float: left; width: 50%; } 
#Parent.left .right { display: none; } 
#Parent.right .left { display: none; } 
</style> 

자바 스크립트 :

<script type="text/javascript"> 
function show(c) {document.getElementById('Parent').className=c;} 
</script> 

,

HTML :

<div id="Parent" class="both"> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div> 
<input type="button" value="both" onclick="show('both');" /> 
<input type="button" value="left" onclick="show('left');" /> 
<input type="button" value="right" onclick="show('right');" />