콘텐츠가있는 두 div 사이를 전환하십시오.

Question

두 개의 div가 있는데, 두 개의 div가 있습니다.

메인 div는 측면 탐색 용이며 이미지 및 메뉴 목록도 포함합니다.

두 divs 토글을 만들 수 있지만 기본 div 안의 내용도 전환하지 않습니다. 내가 jQuery를에 새로 온 사람이 수행 할 수 있습니다 확신으로

<div class="wide"> 
<img src="images/logo150.png" width="150" height="90"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Latest News</a></li> 
</ul> 
</div> 

<script> 
$(".wide").click(function() { 
$(this).toggleClass("narrow", 1000, "easeOutSine"); 
}); 
</script> 

<style> 
html { 
margin: 0px; 
padding: 0px; 
height: 100%; 
} 
body { 
height: 100%; 
margin: 0px; 
padding: 0px; 
background-image: url(load/images/1.jpg); 
background-repeat: no-repeat; 
background-position: left top; 
} 
.wide { 
width: 150px; 
height: 100%; 
position: fixed; 
z-index: 1000; 
min-height: 1000%; 
background-color: rgba(0,0,0,0.8); 
padding-top: 50px; 
padding-right: 20px; 
padding-bottom: 20px; 
padding-left: 20px; 
cursor: pointer; 
} 
.narrow { 
width: 50px; 
height: 100%; 
position: fixed; 
z-index: 10; 
min-height: 1000%; 
padding-top: 50px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-left: 10px; 
cursor: pointer; 
background-color: rgba(0,0,0,0.8); 
background-image: url(logotop.png); 
background-repeat: no-repeat; 
background-position: center top; 
} 
</style> 

http://jsfiddle.net/jCcg7/

어떤 도움

이 크게 감사합니다.

는

Answer 1

당신은 CSS 규칙을 사용하여 축소 요소의 "오버 플로우"를 숨길 필요가 감사합니다. 당신은 폭 50 픽셀을 포함하는 요소 (.wide)의 클래스를 전환하는 http://jsfiddle.net/jCcg7/3/

Answer 2

있지만, 내용 (예를 들어, IMG)는 150 픽셀로 고정되어 있습니다 - 그러므로 그들은 오버플로 :

overflow:hidden; /* Inside .narrow */ 

여기를 참조하십시오.

overflow: hidden;