<ul class="menu-list">
<li>
<p class="menu_head">目标管理</p>
<div class="menu_body">
<a href="">主题空间</a>
<a href="">项目任务</a>
<a href="">工作计划</a>
<a href="">日程事件</a>
<a href="">时间视图</a>
</div>
</li>
<li>
<p class="menu_head">会议管理</p>
<div class="menu_body">
<a href="">主题空间</a>
<a href="">会议安排</a>
<a href="">代开会议</a>
<a href="">已开会议</a>
<a href="">会议资源</a>
</div>
</li>
<li>
<p class="menu_head">知识社区</p>
<div class="menu_body">
<a href="">我的收藏</a>
<a href="">知识广场</a>
<a href="">文档中心</a>
<a href="">我的博客</a>
<a href="">文档库管理</a>
</div>
</li>
<li>
<p class="menu_head">我的工具</p>
<div class="menu_body">
<a href="">综合查询</a>
<a href="">通讯录</a>
<a href="">便签</a>
<a href="">计算器</a>
<a href="">万年历</a>
<a href="">常用链接</a>
</div>
</li>
</ul>
<script type="text/javascript">
$('.menu_head + div').hide();
$('.menu_head ').click(function(){
$(this).css('backgroundImage','(url(img/pro_down.png)');
$(this).next('div').show();
var parentli = $(this).parent('li');
var lis = parentli.siblings('li');
lis.children('p').css('backgroundImage','url(img/pro_left.png)');
lis.children('div').hide();
});
</script>
</body>
</html>
- css代码
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 100px;
}
.menu_head {
width: 185px;
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 17px;
color: #475052;
cursor: pointer;
border: 1px solid #e1e1e1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(../img/pro_left.png) center right no-repeat;
}
.menu_list .current {
background: #f1f1f1 url(../img/pro_down.png) center right no-repeat;
}
.menu_body {
width: 223px;
height: auto;
overflow: hidden;
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a {
display: block;
width: 223px;
height: 38px;
line-height: 38px;
padding-left: 38px;
color: #777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #e1e1e1;
}