js实例入门(简单展开或关闭)

时间:2020-05-12 人气:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>简直的展开或关闭</title> 
<style type="text/css"> 
.hide{display:none;} 
.show{display:block;} 
.hand{cursor:pointer;} 
.text{padding:10px;background:F3FCFF;line-height:1.3em;border:solid 5px B2DCF9;margin-bottom:7px;} 
</style> 
<script type="text/javascript"> 
/*根据点击项，动态加载内容至iframe中 
expand(展开),e_d即expand div 
container(容器),c即容器缩写 
b为bool缩写 
n为num缩写 
*/ 
function e_d(obj,n){//这二个参数构成iframe里的子页面。test1.htm/test2.htm/test3.htm 
var c = obj.parentNode.nextSibling; /*取父级的下一个节点,跟父级同辈的。*/ 
var b = ( c.className == 'hide' ); 
obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*变换+-图片*/ 
c.className=b?'text':'hide' 
if(!c.innerHTML){//如果这一层里没有内容才更新。有内容则不变化 
var str = '<iframe id="iframe' + n + '" src="test' + n + '.htm" scrolling="auto" frameborder="0" width="100%" height="100%"'; 
str += 'onload="this.style.height=iframe' + n + '.document.body.scrollHeight+30"></iframe>'; 
c.innerHTML = str; 
} 
} 
</script> 
</head> 
<body> 
<div> 
<div> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25775.gif" alt="展开" onclick='e_d(this,1)' />展开1 
</div> 
<div></div> 
</div> 
<div> 
<div> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25775.gif" alt="展开" onclick='e_d(this,2)' />展开2 
</div> 
<div></div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容