风无双兼容IE6 IE7 FF的显示隐藏伸缩菜单

作者:风无双来源:5study.net 时间:2008-5-31 网友评论条【大中小】

由于最近项目要用到能显示隐藏的功能菜单，所以在网络上找了找，确实很多，但是都不合用。
要不就是折叠了都折叠，要不就是打开了都打开，要不就是只支持IE6的。IE下和FF下不能使用。
自己写代码碰到很多问题，多谢论坛的朋友帮忙才解决问题。这里谢谢朋友们....

Demo1：IE6 IE7 FF测试通过...

可以实现：点击后打开再点击关闭并且同时改变标题样式

<!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=utf-8" /> <title>二级伸缩菜单代码 - 中国asp之家</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{ font-size:12px; color:#333;text-align:center;} .Test5study{ background:#fff;} .Test5study{text-align:left;width:220px;height:auto;border:solid 1px #F7BE21;margin:10px auto 0px;overflow: hidden;position: absolute;left: 10px;top: 0px; } .Test5study h2{font-size:14px;height:22px;line-height:22px;background:#FFF7C6;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #F7BE21; font-weight:normal;cursor:pointer;} .Test5study h2 span{font-weight: normal;position:absolute;top:0;right:6px;} .Test5study li{border-bottom:dashed 1px #eee;} .Test5study {border-bottom:solid 1px #F7BE21;} .TxtList{ list-style:disc url(none); margin:6px 10px 6px 20px;} </style> </head> <body> <div id="Test5study" class="Test5study"> <h2 id="t1" onclick="ShHi('t1','h1');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h1" style="display:none;"> <li><a href="http://www.aspxhome.com/">欢迎来到中国asp之家</a>...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t2" onclick="ShHi('t2','h2');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h2" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t3" onclick="ShHi('t3','h3');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h3" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t4" onclick="ShHi('t4','h4');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h4" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> </div> <script type="text/javascript"> /* Author: peng peng Time:2007-07-20 Email: qq9959448@163.com Homepage:www.5study.net */ function $(d){return document.getElementById(d);} function f(d){var t=$(d);if (t){return t.style;}else{return null;}} function Hi(){var items = document.getElementsByTagName("ul");for (var i=0;i<items.length;i++){items[i].style.display='none';}} function Hl(){var iteml = document.getElementsByTagName("h2");for (var j=0;j<iteml.length;j++){iteml[j].style.fontWeight='normal';}} function h(d){var s=f(d);var b=s.display;if (b=='none'){return true;}else{return false;}} function ShHi(ii,jj){if(h(jj)){f(jj).display='block';f(ii).fontWeight='bold';}else{f(jj).display='none';f(ii).fontWeight='normal';}} </script> </body> </html> [提示：你可先修改部分代码，再按运行]

Demo2：IE6 IE7 FF测试通过...
可以实现：点击后打开再点击关闭并且同时改变标题样式支持打开任意项同时关闭其它项目

<!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=utf-8" /> <title>显示隐藏二级菜单 - 中国asp之家</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{ font-size:12px; color:#333;text-align:center;} .Test5study{ background:#fff;} .Test5study{text-align:left;width:220px;height:auto;border:solid 1px #F7BE21;margin:10px auto 0px;overflow: hidden;position: absolute;left: 10px;top: 0px; } .Test5study h2{font-size:14px;height:22px;line-height:22px;background:#FFF7C6;text-indent:10px;position:relative;border-top: 1px solid #fff;border-bottom: 1px solid #F7BE21; font-weight:normal;cursor:pointer;} .Test5study h2 span{font-weight: normal;position:absolute;top:0;right:6px;} .Test5study li{border-bottom:dashed 1px #eee;} .Test5study {border-bottom:solid 1px #F7BE21;} .TxtList{ list-style:disc url(none); margin:6px 10px 6px 20px;} </style> </head> <body> <div id="Test5study" class="Test5study"> <h2 id="t1" onclick="ShHi('t1','h1');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h1" style="display:none;"> <li><a href="http://www.aspxhome.com/">欢迎来到中国asp之家</a>...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t2" onclick="ShHi('t2','h2');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h2" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t3" onclick="ShHi('t3','h3');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h3" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> <h2 id="t4" onclick="ShHi('t4','h4');">传说中的标题<span>更多...</span></h2> <ul class="TxtList" id="h4" style="display:none;"> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> <li>请帮忙把这段代码再优化优化...</li> </ul> </div> <script type="text/javascript"> function $(d){return document.getElementById(d);} function f(d){var t=$(d);if (t){return t.style;}else{return null;}} function Hi(){var items = document.getElementsByTagName("ul");for (var i=0;i<items.length;i++){items[i].style.display='none';}} function Hl(){var iteml = document.getElementsByTagName("h2");for (var j=0;j<iteml.length;j++){iteml[j].style.fontWeight='normal';}} function h(d){var s=f(d);var b=s.display;if (b=='none'){return true;}else{return false;}} function ShHi(ii,jj){if(h(jj)){Hl();Hi();f(jj).display='block';f(ii).fontWeight='bold';}else{Hl();Hi();f(jj).display='none';f(ii).fontWeight='normal';}} </script> </body> </html> [提示：你可先修改部分代码，再按运行]

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/download/javascript/20085/392331.htm

站长工具

风无双 兼容IE6 IE7 FF的显示隐藏伸缩菜单

Aspxhome.com. 中国Asp之家. 版权所有

风无双兼容IE6 IE7 FF的显示隐藏伸缩菜单