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


Posted in Javascript onApril 11, 2013

今天做了一个左侧菜单的效果,做后台的时候应该会经常用到这个效果的,代码同样是简洁明了,复制即可用:
效果图如下:
基于jquery实现后台左侧菜单点击上下滑动显示 
代码如下:(这个上下箭头的图标如上,图标可自己换)

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>后台左侧菜单点击上下滑动显示jquery</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(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> 
<style type="text/css"> 
* { 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> 
<div class="box"> 
<dl> 
<dt>标题一</dt> 
<dd> 
<p><a href="#">第一项</a></p> 
<p><a href="#">第二项</a></p> 
<p><a href="#">第三项</a></p> 
</dd> 
<dt>标题二</dt> 
<dd> 
<p><a href="#">第一项</a></p> 
<p><a href="#">第二项</a></p> 
<p><a href="#">第三项</a></p> 
</dd> 
<dt>标题三</dt> 
<dd> 
<p><a href="#">第一项</a></p> 
<p><a href="#">第二项</a></p> 
<p><a href="#">第三项</a></p> 
</dd> 
<dt>标题四</dt> 
<dd> 
<p><a href="#">第一项</a></p> 
<p><a href="#">第二项</a></p> 
<p><a href="#">第三项</a></p> 
</dd> 
</dl> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 #Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 #Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 #Javascript
在JavaScript并非所有的一切都是对象
Apr 11 #Javascript
在JavaScript中typeof的用途介绍
Apr 11 #Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 #Javascript
javascript中的delete使用详解
Apr 11 #Javascript
You might like
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
javascript每日必学之封装
2016/02/23 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python 循环终止语句的三种方法小结
2019/06/24 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
关于爱国的标语
2014/06/24 职场文书
员工培训协议书
2014/09/15 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python