[html]代码库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>兼容IE和FireFox的可显隐下拉菜单(一)</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
/*兼容IE和FireFox的可显隐下拉菜单(一):点击显示,再点击隐藏,同时改变标题样式*/
*{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>
<!--把下面代码加到<body>与</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>内容一之一</li>
<li>内容一之二</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>
<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>
<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>
<li>内容四之五</li>
</ul>
<h2 id="t5" onclick="ShHi('t5','h5');">标题五<span>更多…</span></h2>
<ul class="TxtList" id="h5" style="display:none;">
<li>内容五之一</li>
<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)){f(jj).display='block';f(ii).fontWeight='bold';}else{f(jj).display='none';f(ii).fontWeight='normal';}}
</script>
</body>
</html>