js实现点击按钮控制展开与收起

最新推荐文章于 2024-02-22 18:45:00 发布

qikexun

最新推荐文章于 2024-02-22 18:45:00 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qikexun/article/details/130792265

版权

<!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;
    }

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();";
   }