今天我们用最简单的方法来实现下拉菜单效果，利用了js的document.getElementById来获取id再对要显示的层作显示隐藏处理就KO了。
| 代码如下 |
|
|
<html>
<head>
<title>下拉菜单</title>
</head>
<script type="text/javascript">
function doShow(id){
var did=document.getElementById("ul"+id); //获得ul的id
if(did.style.display=="none"){
did.style.display="block"; //设置ul显示
}else{
did.style.display="none"; //设置ul隐藏
}
}
</script>
<!--CSS-->
<style type="text/css">
body{
font-size:12px;
}
ul{
list-style:none;
}
</style>
<body>
<div style="background:#D6DFF7; width:100px;">
<div onClick="doShow(1)" style=" font-weight:700;">[-系统管理-]</div>
<ul id="ul1">
<li>首页管理</li>
<li>账户管理</li>
<li>版权管理</li>
<li>数据备份</li>
<li>系统信息</li>
<li>友情连接</li>
</ul>
<div onClick="doShow(2)" style=" font-weight:700;">[-新闻管理-]</div>
<ul id="ul2">
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
</ul>
<div onClick="doShow(3)" style=" font-weight:700;">[-网站管理-]</div>
<ul id="ul3">
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
<li>首页管理</li>
</ul>
</div>
</body>
</html>
|
