我想要切换两个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>
任何帮助都非常感谢,因为我是jQuery的新手并且确信可以做到这一点。
谢谢
答案 0 :(得分:1)
答案 1 :(得分:1)
您正在将包含元素(.wide)的类切换为50px宽,但内容(例如img)固定为150px - 因此它们将溢出。
在.narrow类中,您需要使用以下方法隐藏此溢出:
overflow: hidden;