css
*{margin:0;padding:0;} ul,li{list-style:none;} #main{ width:200px; margin: 100px 200px; } #one,#two,#three,#four{ width:230px; border: 1px solid #e1e1e1; } .head-title{ width: 190px; height: 47px; line-height: 47px; padding-left: 38px; font-size: 17px; color: #475052; cursor: pointer; border: 1px solid #e1e1e1; margin: 0px; font-weight: bold; background: #f1f1f1 url(../img/pro_left.png) center right no-repeat; } .sub-title li{ width: 185px; height: 38px; padding-left: 38px; line-height: 38px; color: #777; background: #fff; border-bottom: 1px solid #e1e1e1; }html
<body> <div id="main"> <div id="one"> <p class="head-title">目标管理</p> <ul class="sub-title"> <li>主题空间</li> <li>项目任务</li> <li>工作计划</li> <li>日程事件</li> <li>时间视图</li> </ul> </div> <div id="two"> <p class="head-title">会议管理</p> <ul class="sub-title"> <li>会议主题</li> <li>会议安排</li> <li>待开会议</li> <li>已开会议</li> <li>会议资源</li> </ul> </div> <div id="three"> <p class="head-title">知识社区</p> <ul class="sub-title"> <li>我的收藏</li> <li>知识广场</li> <li>文档中心</li> <li>我的博客</li> <li>文档库管理</li> </ul> </div> <div id="four"> <p class="head-title">我的工具</p> <ul class="sub-title"> <li>综合查询</li> <li>通讯录</li> <li>计算器</li> <li>便签</li> <li>万年历</li> </ul> </div> </div> </body>script
<script> $(function(){ var $p=$(".head-title"); $p.click(function(){ if($(this).siblings().is(':hidden')){//如果除当前元素之外的元素是隐藏的 //让当前ul显示，并且使除自身父盒子之外的ul全部隐藏 //slideUp(200)和slideDown(200) 往上滑和往下滑 $(this).next().slideDown(200).parent().siblings().children("ul").slideUp(200); //加减号变化 $(this).css("background","#f1f1f1 url(img/pro_down.png) center right no-repeat"); $(this).parent().siblings().children("p").css("background","#f1f1f1 url(img/pro_left.png) center right no-repeat"); }else{ $(this).next().slideUp(200); $(this).css("background","#f1f1f1 url(img/pro_left.png) center right no-repeat"); } }) }) </script>