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


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