基于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 静态页面实现随机显示广告的办法
Nov 17 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
js操作数组函数实例小结
Dec 10 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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 intval的测试代码发现问题
2008/07/27 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js确定对象类型方法
2012/03/30 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
python二分法实现实例
2013/11/21 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python去除所有html标签的方法
2015/05/05 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python变量和字符串详解
2017/04/29 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python无序链表删除重复项的方法
2020/01/17 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
护理个人求职信范文
2014/01/08 职场文书
优秀教师获奖感言
2014/01/31 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
师范生小学见习总结
2015/06/23 职场文书