用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

兼容IE和FireFox的可显隐下拉菜单

2013-03-19 作者: 云代码会员举报

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


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...