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

更新时间：2008年11月18日 00:26:17 作者：

简直的展开或关闭

<!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 class="hand"> <img src="images/plus.gif" alt="展开" onclick='e_d(this,1)' />展开1 </div> <div class="hide"></div> </div> <div> <div class="hand"> <img src="images/plus.gif" alt="展开" onclick='e_d(this,2)' />展开2 </div> <div class="hide"></div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript中“+=”的应用
JavaScript中“+=”的应用...
2007-02-02
JS封装的模仿qq右下角消息弹窗功能示例
这篇文章主要介绍了JS封装的模仿qq右下角消息弹窗功能,涉及javascript事件响应、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-08-08
JS ListBox的简单功能实现代码
这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。
2008-10-10
JavaScript开发者必备的10个Sublime Text插件
Sublime Text几乎是任何开发者在其工具箱的必备应用程序,这篇文章主要介绍了JavaScript开发者必备的10个Sublime Text插件，感兴趣的小伙伴们可以参考一下
2016-02-02
微信小程序图片选择区域裁剪实现方法
本篇文章主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
js监听鼠标事件控制textarea输入字符串的个数
一个js控制textarea输入字符串的个数的脚本，当鼠标按下抬起时判断输入字符数，很简单，但很实用
2014-09-09
JS实现带动画的回到顶部效果
这篇文章主要为大家详细介绍了JS实现带动画的回到顶部效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
解决localstorage存储boolean类型值的小坑
这篇文章主要介绍了解决localstorage存储boolean类型值的小坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
JS动态计算移动端rem的解决方案
移动设备分辨率五花八门虽然我们可以通过CSS3的media query来实现适配，但是这种做法并不能适配所有设备，这篇文章主要介绍了js动态计算移动端rem的解决方案，非常不错，感兴趣的朋友一起看看吧
2016-10-10
微信小程序实现轮播图指示器
这篇文章主要为大家详细介绍了微信小程序实现轮播图指示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06