JS实现点击收缩，点击展开效果

日期：2020-06-26 栏目：前端经验浏览：次

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>点击收缩，点击展开</title>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
	
<p>
	<span>测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩测试点击展收缩</span><span class="span">.....</span><a href="javascript:;">>>收缩</a>
</p>
  <script type="text/javascript">
  window.onload = function(){
  var oP = document.getElementsByTagName('p')[0];
  var oSpan = oP.getElementsByTagName('span')[0];
  var oA = oP.getElementsByTagName('a')[0];
  var str = oSpan.innerHTML;
  var onOff = true;
 
  oA.onclick = function(){
  	if( onOff ){
	oSpan.innerHTML=str.substring(0,30);//substr slice都可以
	oA.innerHTML = '>>展开';
	$(".span").show();
	//onOff = false;
	}else{
	oSpan.innerHTML=str;
	oA.innerHTML = '>>收缩';
	$(".span").hide();
	//onOff = true;
	}
	 onOff = !onOff;
  };
 };
</script>
</body>
</html>

转载注明出处：http://www.duanlonglong.com/qdjy/254.html

JS实现点击收缩，点击展开效果

相关推荐