基于jquery实现后台左侧菜单点击上下滑动显示

今天做了一个左侧菜单的效果，做后台的时候应该会经常用到这个效果的，代码同样是简洁明了，复制即可用：效果图如下

代码如下：(这个上下箭头的图标如上，图标可自己换)复制代码代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题后台左侧菜单点击上下滑动显示jquery/title脚本类型=' text/JavaScript ' src=' http :3358 JT。875 .cn/js/jquery。js /脚本脚本类型=' text/JavaScript ' $(function(){ $().box dt:first ').添加CLaSS(' active ')；$('.盒子dd:not(:first ).hide()；$('.方框dt ').单击(function(){ $(this)).下一个(' dd ').slideToggle().兄弟姐妹(' dd ').向上滑动()；$(这个)。toggleClass('active ').兄弟姐妹(' dt ').移除CLaSS(' active ')；});});/script style type=' text/CSS ' * { padd :0；margin:0}车身{ padd :100 pxfont :12 px '宋体；} dl、dt、DD {列表式：无；} .盒子{宽度：500像素边框-底部：1px实心# CCC}。box dt { height:30px线高：30 pxpadd :0 10px font-size :12 px；光标：指针指针；border:1px固体# cccborder-底部：无；背景： # eee网址(img/BG。gif)不重复右-27px；} .盒子dt。活动{背景-位置：右侧7px} .方框DD {边框-左侧：1 px实心# CCC右边框：1px实心# cccpadding:0 10px}。方框DD p {行高：20 px}/style/head body div class=' box ' dl dt标题一/dt dd pa href='# '第一项/a/p pa href='# '第二项/a/p pa href='# '第三项/a/p /dd dt标题二/dt dd pa href='# '第一项/a/p pa href='# '第二项/a/p pa href='# '第三项/a/p /dd dt标题三/dt dd pa href='# '第一项/a/p pa href='# '第二项/a/p pa href='# '第三项/a/p /dd dt标题四/dt dd pa href='# '第一项/a/p pa href='# '第二项/a/p pa href='# '第三项/a/p /dd /dl /div /body /html