JS实现点击收缩，点击展开效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>点击收缩，点击展开</title>
<script src="http://libs.baidu.com/jq...
<!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>
- 发表于 2020-06-25 21:57
- 阅读 ( 522 )
- 分类：web前端开发
