<html>
<head>
<meta charset="utf-8"/>
<title>jQuery制作简易菜单</title>
</head>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
#head{
width:1350px;
height:50px;
background-color: gold;
}
#menu{
width:150px;
height:500px;
background-color: gainsboro;
float:left
}
#body{
width:1350px;
height:500px;
background-color:burlywood;
}
#footer{
width:1350px;
height:50px;
background-color: greenyellow;
}
ul li{
list-style-type: none;
}
#showpostone{
position: relative;
left:10px;
}
#showposttwo{
position: relative;
left:10px;
}
</style>
<script type="text/javascript">
function btone(){
$("#showpostone").toggle(100);
}
function bttwo(){
$("#showposttwo").toggle(100);
}
</script>
<body>
<div id="head">
顶部
</div>
<div id="menu">
<ul>
<label for="" onclick="btone()">投票管理</label>
<div id="showpostone">
<li><label for="">投票发布</label></li>
<li><label for="">投票统计</label></li>
</div>
</ul>
<ul>
<label for="" onclick="bttwo()">活动管理</label>
<div id="showposttwo">
<li><label for="">活动发布</label></li>
<li><label for="">活动统计</label></li>
</div>
</ul>
</div>
<div id="body">
主体
</div>
<div id="footer">
底部
</div>
</body>
</html>
文记：这是延续昨天的基本布局做的，用jQuery制作菜单，用label标签里的onclick属性调用方法，再用jQuery里的toggle事件，实现是显示与隐藏，当鼠标点击的时候，括号里是以毫秒为单位显示或隐藏区域。