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 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JavaScript类的写法
Sep 17 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
vue 指定组件缓存实例详解
Apr 01 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操作SVN版本服务器类代码
2011/11/27 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
vuex存储token示例
2019/11/11 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python学习开发mock接口
2019/04/28 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python hashlib模块的使用示例
2020/10/09 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
四年级数学教学反思
2014/02/02 职场文书
会议承办单位欢迎词
2019/07/09 职场文书