2013-11-14 43 views
0

我有兩個div,我想要在它們之間切換。在內容的兩個div之間切換

主div用於側面導航,還包含圖像和菜單列表。

我可以使兩個div切換,但主div內的內容也不會切換。

<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/

任何幫助,因爲我是新來的jQuery和我相信這是可以做到極大的讚賞。

謝謝

+0

是否與我的回答有問題?或者你有沒有在別處找到答案?如果問題解決了,請關閉該問題:) –

回答

1

你需要隱藏使用CSS規則的收縮元素的「溢出」。

overflow:hidden; /* Inside .narrow */ 

在這裏看到:http://jsfiddle.net/jCcg7/3/

1

您正在切換的類包含的元素(.wide)至50像素寬,但內容(例如圖片)被固定在150像素 - 因此他們會溢出。

在您需要使用隱藏這個溢出.narrow類:

overflow: hidden;