頁面導航: 首頁網絡編程JavaScriptjavascript技巧 → 正文內容 js 展開閉合

js展開閉合效果演示代碼

發布:whsnow 字體:[增加 減小] 類型:轉載
本文為大家介紹下js如何實現展開閉合效果,具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
復制代碼 代碼如下:

<!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>

Tags:展開 閉合

文章評論

最 近 更 新
熱 點 排 行
乐盈在线彩票 临湘市 | 太和县 | 镇坪县 | 余干县 | 隆昌县 | 天等县 | 常州市 | 平阳县 | 台中县 | 渑池县 | 武宣县 | 麻阳 | 浑源县 | 方山县 | 晴隆县 | 江安县 | 富锦市 | 集贤县 | 平凉市 | 潜江市 | 乐亭县 | 淮北市 | 水富县 | 额敏县 | 保德县 | 昆明市 | 阳山县 | 达州市 | 利辛县 | 泽普县 | 云梦县 | 河源市 | 高邮市 | 温泉县 | 福鼎市 | 山丹县 | 汕尾市 | 电白县 | 平乡县 | 巫溪县 | 集安市 | 马龙县 | 长寿区 | 湘潭县 | 四川省 | 沐川县 | 琼结县 | 阿拉善右旗 | 和龙市 | 科尔 | 尉氏县 | 边坝县 | 昌吉市 | 晴隆县 | 古交市 | 同仁县 | 扬州市 | 连平县 | 扎囊县 | 铁力市 | 河北区 | 安仁县 | 乌拉特中旗 | 天镇县 | 贵溪市 | 南召县 | 陵水 | 沧源 | 蛟河市 | 鄂托克旗 | 华坪县 | 孙吴县 | 靖州 | 平南县 | 阿坝县 | 宁海县 | 漾濞 | 葵青区 | 咸阳市 | 玉山县 | 辽源市 | 景东 | 沅陵县 | 安龙县 | 安仁县 | 师宗县 | 高清 | 武安市 | 卢龙县 | 恩平市 | 温州市 | 固安县 | 西青区 | 杭锦旗 | 宜宾市 | 同仁县 | 临桂县 | 平顶山市 | 大足县 | 开化县 | 安顺市 | 城固县 | 延长县 | 工布江达县 | 乌兰浩特市 | 阳高县 | 聊城市 | 赫章县 | 周宁县 | 连云港市 | 昌吉市 | 菏泽市 | 密山市 | 尼勒克县 | 攀枝花市 | 新晃 | 柞水县 | 保德县 | 三都 | 秭归县 | 容城县 | 阿拉善左旗 | 莱芜市 | 富蕴县 | 阜阳市 | 波密县 | 河西区 | 南涧 | 太和县 | 五河县 | 武山县 | 大石桥市 | 广饶县 | 高尔夫 | 成安县 | 渭南市 | 勐海县 | 阿拉善左旗 | 崇信县 | 四子王旗 | 宁化县 | 海盐县 | 石家庄市 | 曲周县 | 星座 | 化州市 | 松溪县 | 沧州市 | 盘锦市 | 灵宝市 | 托里县 | 乐昌市 | 嘉义县 | 鄂托克前旗 | 新巴尔虎右旗 | 佛山市 | 涞源县 | 江华 | 凭祥市 | 德惠市 | 双桥区 | 易门县 | 乳源 | 论坛 | 永城市 | 柳林县 | 白玉县 | 大丰市 | 禹州市 | 界首市 | 炉霍县 | 镇雄县 | 湘西 | 维西 | 万州区 | 南岸区 | 松阳县 | 六盘水市 | 东台市 | 东方市 | 盘锦市 | 宾川县 | 韶山市 | 鹿邑县 | 庆元县 | 榕江县 | 庆阳市 | 日土县 | 成武县 | 揭东县 | 曲周县 | 兴文县 | 墨江 | 聂拉木县 | 金华市 | 乌什县 | 庆安县 | 林周县 | 丹巴县 | 万州区 | 弥渡县 | 金门县 | 敦煌市 | 和政县 | 屏东市 | 九龙坡区 | 青铜峡市 | 兴国县 | 湖北省 | 衡水市 | 叙永县 | 栾城县 | 辉南县 | 晋江市 | 当阳市 | 武汉市 | 桓台县 | 资源县 | 噶尔县 | 洪江市 | 五莲县 | 永定县 | 东海县 | 宜兰县 | 京山县 | 手机 | 佳木斯市 | 古蔺县 | 汉沽区 | 新丰县 | 夏河县 | 丰镇市 | 常山县 | 广水市 | 华容县 | 邛崃市 | 陆川县 | 措美县 | 合江县 | 五河县 | 唐山市 | 隆子县 | 新化县 | 乌拉特前旗 | 叶城县 | 怀柔区 | 虹口区 | 遂川县 | 南丰县 | 大田县 | 高密市 |