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

更新时间：2013年04月11日 14:52:53 作者：

一个左侧菜单点击是可以上下滑动，简洁时尚，复制即可使用，感兴趣的朋友可以参考下哈，希望对你有所帮助

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

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

 
<!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> 

您可能感兴趣的文章:

jQuery实现动态操作table行
这篇文章主要为大家详细介绍了jQuery实现动态操作table行，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JQuery实现ajax请求的示例和注意事项
今天小编就为大家分享一篇关于JQuery实现ajax请求的示例和注意事项，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
jQuery v3.3.1的BUG以及解决办法(附解决方案)
这篇文章描述了我们 FineUIPro 产品更新中遇到的一个问题，最终将问题定位到 jQuery.position() 函数，虽然jQuery的做法是依照HTML规范来的，但是 jQuery.offsetParent() 和 jQuery.position() 两个函数有冲突，并且会导致之前的jQuery插件出错，应该算是一个BUG吧
2023-03-03
jquery实现未经美化的简洁TAB菜单效果
这篇文章主要介绍了jquery实现未经美化的简洁TAB菜单效果,涉及jquery鼠标click事件实现页面元素样式动态变换的功能,需要的朋友可以参考下
2015-08-08
jQuery实现可兼容IE6的滚动监听功能
这篇文章主要介绍了jQuery实现可兼容IE6的滚动监听功能,结合实例形式分析了jQuery针对不同浏览器的事件监听、响应及页面属性动态变换相关实现技巧,需要的朋友可以参考下
2017-09-09
Jquery获取元素的父容器对象示例代码
本篇文章主要是对Jquery获取元素的父容器对象的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
详解jQuery的animate动画方法及动画排队问题解决
这篇文章主要介绍了jQuery的animate动画方法及动画排队问题解决的相关资料，帮助大家更好的理解和学习使用jQuery，感兴趣的朋友可以了解下
2021-05-05
jQuery+ajax+asp.net获取Json值的方法
这篇文章主要介绍了jQuery+ajax+asp.net获取Json值的方法,涉及jQuery的ajax技术与asp.net后台交互的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
使用jQuery实现掷骰子游戏
这篇文章主要介绍了使用jQuery实现掷骰子游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
jQuery中slideUp 和 slideDown 的点击事件
这篇文章主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下
2015-02-02