利用JS实现段落的展开收缩

先实现收缩然后点击实现展开：
在这里插入图片描述

HTML文档如下：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset="UTF-8">
	<title>展开与收缩</title>
	<link rel="stylesheet" href="1.css"> 
	
</head>
<body>
	      <div class="text">
		              <span class="span"><p class="p1">我在水中不停地变换姿势：有速度较慢的蛙泳；有活泼有趣的狗刨；有随意舒适的仰泳；还有激情四射的自由泳......泳池中的爷爷奶奶们，也是活力四射，仿佛不甘落后于叔叔阿姨们，他们都好像在相互叫着劲一般的奋力畅游。小朋友们在大人的带领下，有的在认真学习游泳；有的在嬉戏打闹。突然，我看见一根黄色的管子在泳池中缓缓移动。那是什么？我心想，是不是哪位小朋友的玩具不小心丢那儿了？我正准备游过去帮忙捡拾起这个“玩具”，忽然，在黄色的管子下面冒出来一个脑袋。只见他留着短平的头发，戴着一副深蓝色的泳镜，嘴里含着一个“L”形状</p> 
		              <p class="p2">火辣辣的太阳炙烤着大地，连一丝清风也没有。蝉儿们都躲在大树背后发出没完没了的鸣叫声，小鸟也只敢躲在树荫下歇息，好像怕阳光灼伤了它们美丽的翅膀。就连一向不怕热的榕树，此时也垂下了它那高傲的脑袋。人们都待在空调房里，试图躲避这个炎热的夏日。我也想凉快凉快，于是便和爸爸出发去游泳，从中寻找夏日的一丝清凉。</p> </span>
		              <a class="a" href="javascript:void(0)">展开</a>
          </div>
                   <script type="text/javascript" src="1.js"></script>      　     
</body> 
</html>

CSS文档如下：

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
.text{
	width:600px;
	margin:0 auto;
}
p{
	margin:20px auto;
	text-indent:2em;
}

JS文档如下：

window.onload = function(){
   var span = document.getElementsByClassName("span")[0];
   var a = document.getElementsByClassName("a")[0];
   var str1 = span.innerHTML.substring(0,30) + "...";
   var str2 = span.innerHTML;
   span.innerHTML = str1;
   a.innerHTML = "展开";
   a.onclick = function(){
   	   if(a.innerHTML == "展开"){
   	   	span.innerHTML = str2;
   	   	a.innerHTML = "收缩";
   	   } else{
   	   	span.innerHTML = str1;
   	   	a.innerHTML = "展开";
   	   }
   }
}

即可实现一打开浏览器就是是收缩状态。

利用JS实现段落的展开收缩

猜你喜欢