console
var flag = 0;
function showmenu(id) {
var list = document.getElementById("list" + id);
var menu = document.getElementById("menu" + id) ;
if (flag != 0 && flag != id) {
document.getElementById("list" + flag).style.display = "none";
}
if (list.style.display == "none") {
document.getElementById("list" + id).style.display = "block";
flag = id;
} else {
document.getElementById("list" + id).style.display = "none";
flag = 0;
}
}
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1') ">
<b>
系统维护
</b>
</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>
地址设置
</li>
<li>
环境参数
</li>
<li>
标题设置
</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu('2')">
<b>
人事管理
</b>
</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>
人员信息
</li>
<li>
部门维护
</li>
</ul>
</div>
<div class="title" id="menu3" onclick="showmenu('3')">
<b>
信息查询
</b>
</div>
<div id="list3" class="content" style="display:none">
<ul>
<li>
部门查询
</li>
<li>
人员查询
</li>
<li>
日志查询
</li>
</ul>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px
}
#nav {
margin: 10px;
text-align: center;
line-height: 25px;
width: 200px;
}
.title {
background: #4169E1;
color: #fff;
border-bottom: 1px solid #fff;
cursor: pointer;
}
.title1 {
background: #888;
color: #000;
border-bottom: 1px solid #666;
cursor: pointer;
}
.content li {
color: #336699;
background: #ddd;
border-bottom: 1px solid #fff;
font: font-family: "Times New Roman", Georgia, Serif;
}
li:hover {
background-color: #4682B4;
}