<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉与收起</title>
<link rel="stylesheet" href="css/showhide.css" />
<script type="text/javascript" src="js/showhide.js" ></script>
</head>
<body>
<div id="showhide">
<p>这几天心里颇不宁静。
</p>
<p>今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧</p>
<div id="show" style="display:none;">
<p>
荷塘四面,长着许多树,蓊蓊郁郁的
</p>
<p>
路的一旁,是些杨柳,和一些不知道名字的树。
</p>
</div>
</div>
<p class="slide">
<a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+
</a>
</p>
更多 codeit.org.cn
</body>
</html>
css
body
{
margin: 0 auto;
padding: 0;
}
a:focus
{
outline: none;
}
#showhide
{
background: black;
color: white;
width: 600px;
display: block;
margin: 0 auto;
padding: 5px;
font-size: 20px;
height: auto;
font-family: "微软雅黑";
}
.slide
{
margin: 0;
padding: 0;
width: 600px;
border-top: solid 4px gray;
margin: 0 auto;
}
.btn-slide
{
background: gray;
text-align: center;
width: 120px;
height: 30px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
}
js
function showdiv() {
document.getElementById("show").style.display = "block";
document.getElementById('strHref').innerHTML="收起";
document.getElementById('strHref').href="javascript:hidediv();";
}
function hidediv() {
document.getElementById('show').style.display='none';
document.getElementById('strHref').innerHTML="更多选项+";
document.getElementById('strHref').href="javascript:showdiv();";
}