今天做了一个左侧菜单的效果，做后台的时候应该会经常用到这个效果的,代码同样是简洁明了，复制即可用：效果图如下： 代码如下：（这个上下箭头的图标如上，图标可自己换） 复制代码 代码如下: 后台左侧菜单点击上下滑动显示jquery <br>$(function(){ <br>$(".box dt:first").addClass("active"); <br>$(".box dd:not(:first)").hide(); <br>$(".box dt").click(function(){ <br>$(this).next("dd").slideToggle() <br>.siblings("dd").slideUp(); <br>$(this).toggleClass('active') <br>.siblings("dt").removeClass("active"); <br>}); <br>}); <br> <br>* { padding:0; margin:0; } <br>body { padding:100px; font:12px "宋体"; } <br>dl,dt,dd{list-style:none;} <br>.box { width:500px; border-bottom:1px solid #CCC; } <br>.box dt { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; } <br>.box dt.active { background-position:right 7px; } <br>.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; } <br>.box dd p{line-height:20px; } <br> 标题一 第一项 第二项 第三项 标题二 第一项 第二项 第三项 标题三 第一项 第二项 第三项 标题四 第一项 第二项 第三项
