基于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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php使用google地图应用实例
2014/12/31 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python中with用法讲解
2020/02/07 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
研究生毕业鉴定
2014/01/29 职场文书
大学社团计划书
2014/05/01 职场文书
工程合作意向书范本
2015/05/09 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
go xorm框架的使用
2021/05/22 Golang
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript