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(JS) 压缩 / 混淆 / 格式化批处理工具
本工具所有的功能实现都是由 ttp://jscompress.sinaapp.com/api 处理.（包括现在可以使用的这个在线压缩）
2010-12-12
js匿名函数作为函数参数详解
下面小编就为大家带来一篇js匿名函数作为函数参数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
浅谈javascript的闭包
本文介绍了javascript闭包的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
uniapp获取手机通知权限实现demo
这篇文章主要为大家介绍了uniapp获取手机通知权限实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
js 动态选中下拉框
js 动态选中下拉框
2009-11-11
echartjs实现cross十星辅助线实现示例详解
这篇文章主要为大家介绍了echartjs实现cross十星辅助线实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
详解js中构造流程图的核心技术JsPlumb（2）
这篇文章主要介绍了js中构造流程图的核心技术JsPlumb，jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，需要的朋友可以参考下
2015-12-12
纯javascript实现自动发送邮件
当我们发送邮件时，可以自定义邮件发送的时间，那么使用代码是如何实现的呢？下面通过本篇文章给大家介绍使用纯javascript实现自动发送邮件，感兴趣的朋友可以参考下
2015-10-10
浅谈webpack打包生成的bundle.js文件过大的问题
下面小编就为大家分享一篇浅谈webpack打包生成的bundle.js文件过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
在JavaScript中使用mqtt.js的详细过程
这篇文章主要介绍了在JavaScript中使用mqtt.js的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具