js展开闭合效果演示代码


Posted in Javascript onJuly 24, 2013
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>演示展开闭合效果</title> 
<style type="text/css"> 
table{ 
border:#0000FF 1px solid; 
} 
table td{ 
border:#0033FF 1px solid; 
background-color:#6699FF; 
} 
table td div{ 
background-color:#FFFF99; 
display:none; 
} 
table td a:link,table td a:visited{ 
text-decoration:none; 
color:#993300; 
} 
.open{ 
display:block; 
} 
.close{ 
display:none; 
} 
</style> 
<script type="text/javascript"> 
function list(){ 
var aNode = event.srcElement; 
//alert(aNode.nextSibling.nodeName);//拿下一个兄弟节点容易拿到空文本节点 
var tdNode = aNode.parentNode; 
var divNode = tdNode.getElementsByTagName("div")[0]; 
var tabNode = document.getElementsByTagName("table")[0]; 
var divNodes = tabNode.getElementsByTagName("div"); 
for(var x = 0;x < divNodes.length;x++){ 
if(divNodes[x]==divNode){ 
if(divNode.className=="open"){ 
divNode.className="close"; 
}else{ 
divNode.className="open"; 
} 
}else{ 
divNodes[x].className="close"; 
} 
} //alert(divNode.nodeName); 
} 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<a href="javascript:void(0)" onclick="list()">好友菜单列表</a> 
<div> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<a href="javascript:void(0)" onclick="list()">好友菜单列表</a> 
<div> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<a href="javascript:void(0)" onclick="list()">好友菜单列表</a> 
<div> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<a href="javascript:void(0)" onclick="list()">好友菜单列表</a> 
<div> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
新白发魔女传<br /> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

js展开闭合效果演示代码
Javascript 相关文章推荐
JavaScript学习笔记记录我的旅程
May 23 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
Javascript的无new构建实例详解
May 15 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 #Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 #Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 #Javascript
javascript中比较字符串是否相等的方法
Jul 23 #Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 #Javascript
js如何实现设计模式中的模板方法
Jul 23 #Javascript
js替换字符串的所有示例代码
Jul 23 #Javascript
You might like
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Pandas标记删除重复记录的方法
2018/04/08 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
flask-restful使用总结
2018/12/04 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python基于opencv检测程序运行效率
2019/12/28 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python能自学吗
2020/06/18 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
2014春晚主持词
2014/03/25 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
仲裁协议书
2014/09/26 职场文书
安全生产会议制度
2015/08/06 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS