实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h4 onclick="func(1)">用户管理</h4>
<ul id="u1" style="display:none">
<li>用户列表</li>
<li>添加用户</li>
</ul>
<h4 onclick="func(2)">分类管理</h4>
<ul id="u2" style="display:none">
<li>分类列表</li>
<li>添加分类</li>
</ul>
<h4 onclick="func(3)">商品管理</h4>
<ul id="u3" style="display:none">
<li>商品列表</li>
<li>添加商品</li>
</ul>
<h4 onclick="func(4)">订单管理</h4>
<ul id="u4" style="display:none">
<li>订单列表</li>
<li>添加订单</li>
</ul>
</body>
<script>
function func(id){
//alert(id);
//获取对应点击的列表对象
var ul = document.getElementById('u'+id);
//console.log(ul);
//判断是否是显示操作
//alert(ul.style.display);
if(ul.style.display=="none"){
ul.style.display="block";
}else{
ul.style.display="none";
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
