js完成overflow隐藏内容的显示
求帮忙写一段可以完成上图特效的js，最好附带需要的HTML相关语句段。情况就是使用overflow隐藏多余的部分，点击按钮可以把隐藏的部分显示并且隐藏该按钮。...
求帮忙写一段可以完成上图特效的js，最好附带需要的HTML相关语句段。
情况就是使用overflow隐藏多余的部分，点击按钮可以把隐藏的部分显示并且隐藏该按钮。 展开
情况就是使用overflow隐藏多余的部分，点击按钮可以把隐藏的部分显示并且隐藏该按钮。 展开
1个回答
展开全部
<html>
<head>
<title>
overflow
</title>
<script type="text/javascript" src="
>
<script type="text/javascript">
!window.jQuery && document.write('<script src=
);
</script>
<script>
$(document).ready(function(){
$("#more").toggle(function(){
$(this).text('hidden');
$("#header").css("height","auto").css("overflow","auto");
},function(){
$(this).text("show");
$("#header").css("height","60px").css("overflow","hidden");
})
})
</script>
<style>
#header{
width:96%;
height:60px;
position:fixed;
top:10;
left:10;
right:10;
overflow:hidden;
border:1px #ff0 solid;
}
.nav{
width:86%;
height:100%;
position:relative;
float:left;
margin:10px;
border:1px #f00 solid;
}
.btn{
width:12%;
height:100%;
position:relative;
float:left;
}
.nav ul {
float:left;
list-style:none;
padding-left:10px;
margin:10px;
display:block;
}
.nav ul li{
float:left;
list-style:none;
padding: 5px 10px;
padding-left:10px;
width:120px;
height:30px;
}
.nav ul li a{
float:left;
list-style:none;
padding:6px 20px 6px 20px;
display:block;
border:1px #000 solid;
}
.nav ul li a:hover{
float:left;
list-style:none;
padding:6px 20px 6px 20px;
display:block;
border:1px #fff solid;
background:#999;
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li><a>aaaaa</a></li>
<li><a>aaaab</a></li>
<li><a>aaaac</a></li>
<li><a>aaaad</a></li>
<li><a>aaaae</a></li>
<li><a>aaaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaah</a></li>
<li><a>aaaai</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaba</a></li>
<li><a>aaabb</a></li>
<li><a>aaabc</a></li>
<li><a>aaabd</a></li>
<li><a>aaabe</a></li>
<li><a>aaabf</a></li>
<li><a>aaabj</a></li>
<li><a>aaabh</a></li>
<li><a>aaabi</a></li>
<li><a>aaabj</a></li>
<li><a>baaaa</a></li>
<li><a>baaab</a></li>
<li><a>baaac</a></li>
<li><a>baaad</a></li>
<li><a>baaae</a></li>
<li><a>baaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>baaah</a></li>
<li><a>baaai</a></li>
<li><a>baaaj</a></li>
<li><a>baaba</a></li>
<li><a>baabb</a></li>
<li><a>baabc</a></li>
<li><a>baabd</a></li>
<li><a>baabe</a></li>
<li><a>baabf</a></li>
<li><a>baabj</a></li>
<li><a>baabh</a></li>
<li><a>baabi</a></li>
<li><a>baabj</a></li>
<li><a>aaaaa</a></li>
<li><a>aaaab</a></li>
<li><a>aaaac</a></li>
<li><a>aaaad</a></li>
<li><a>aaaae</a></li>
<li><a>aaaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaah</a></li>
<li><a>aaaai</a></li>
<li><a>aaaaj</a></li>
<li><a>aaaba</a></li>
<li><a>aaabb</a></li>
<li><a>aaabc</a></li>
<li><a>aaabd</a></li>
<li><a>aaabe</a></li>
<li><a>aaabf</a></li>
<li><a>aaabj</a></li>
<li><a>aaabh</a></li>
<li><a>aaabi</a></li>
<li><a>aaabj</a></li>
<li><a>baaaa</a></li>
<li><a>baaab</a></li>
<li><a>baaac</a></li>
<li><a>baaad</a></li>
<li><a>baaae</a></li>
<li><a>baaaf</a></li>
<li><a>aaaaj</a></li>
<li><a>baaah</a></li>
<li><a>baaai</a></li>
<li><a>baaaj</a></li>
<li><a>baaba</a></li>
<li><a>baabb</a></li>
<li><a>baabc</a></li>
<li><a>baabd</a></li>
<li><a>baabe</a></li>
<li><a>baabf</a></li>
<li><a>baabj</a></li>
<li><a>baabh</a></li>
<li><a>baabi</a></li>
<li><a>baabj</a></li>
</ul>
</div>
<div class="btn">
<button id="more">show</button>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
