管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

　　效果图如下：

　　代码如下：（这个上下箭头的图标如上，图标可自己换）

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>后台左侧菜单点击上下滑动显示jquery</title>

　　$(function(){

　　$(".box dt:first").addClass("active");

　　$(".box dd:not(:first)").hide();

　　$(".box dt").click(function(){

　　$(this).next("dd").slideToggle()

　　.siblings("dd").slideUp();

　　$(this).toggleClass('active')

　　.siblings("dt").removeClass("active");

　　});

　　</script>

　　* { padding:0; margin:0; }

　　body { padding:100px; font:12px "宋体"; }

　　dl,dt,dd{list-style:none;}

　　.box { width:500px; border-bottom:1px solid #CCC; }

　　.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; }

　　.box dt.active { background-position:right 7px; }

　　.box dd { border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 10px; }

　　.box dd p{line-height:20px; }

　　</style>

　　</head>

　　<body>

　　<dl>

　　<dd>

　　</dd>

　　<dd>

　　</dd>

　　<dd>

　　</dd>

　　<dd>

　　</dd>

　　</dl>

　　</div>

　　</body>

　　</html>

教程首页更多教程