基于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 相关文章推荐
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
javascript实现倒计时关闭广告
Feb 09 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
jQuery实现菜单栏导航效果
2017/08/15 jQuery
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JS实现简单的表格增删
2020/01/16 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Django中使用locals()函数的技巧
2015/07/16 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python调用webservice接口的实现
2019/07/12 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
档案室主任岗位职责
2014/02/12 职场文书
服务理念标语
2014/06/18 职场文书
单位未婚证明范本
2014/11/25 职场文书
小学运动会开幕词
2015/01/28 职场文书
广告业务员岗位职责
2015/02/13 职场文书
普通员工辞职信范文
2015/05/12 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
导游词之韩国济州岛
2019/10/28 职场文书