基于jquery的slideDown和slideUp做手风琴

更新时间：2011年02月12日 15:47:52 投稿：mdxy-dxy

slideDown和slideUp做手风琴菜单面板的代码，也就是大家常说的折叠/展开菜单，不少朋友都喜欢的风格，本代码兼容性好，简单易懂，便于修改，希望大家喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>手风琴</title><style>*{ padding:0; margin:0; }body{ background:#fafafa; font-size:12px; }.slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; }.slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidden; background:#1b1b1b; border-bottom:1px solid #fff; height:32px; line-height:32px; }.slider dt.slider_open{background:#707070; color:# }.slider dd{ display:none; background:#f1f1ea; height:90px; background:#111; border-bottom:1px dashed #fafafa; overflow:hidden;}.slider dd p{ padding:10px 20px; overflow:hidden; }</style><script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script><script>$(function(){//初始化变量var flag = 0;var $dt = $('.slider dt');var $dd = $('.slider dd');//初始化状态$dd.eq(0).show();$dt.eq(0).css('cursor','default');//单击事件$dt.click(function(){if($dt.index(this) == flag) return false;flag = $dt.index(this);$dd.not($dd.eq(flag)).slideUp();$dd.eq(flag).slideDown();$dt.eq(flag).css('cursor','default').addClass('slider_open');$dt.not($dt.eq(flag)).css('cursor','pointer').removeClass('slider_open');});});</script></head><body><dl class="slider"><dt class="slider_open">赵本山，央视春晚</dt><dd><p>央视春晚台柱子赵本山在2011年央视春晚演出后，不得不接受紧急治疗。从个体人性角度祝愿这老爷子健康长寿。但诺将其身体状况作为一种文化隐喻，它却预示着CCTV洗/脑愚乐文化正面临无可奈何花落去寿终正襟的命运。</p></dd><dt>支持打拐</dt><dd><p>据媒体报道，濮存昕也表示对打拐的支持。他建议全国公安系统应尽快建立起一支专业的打拐队伍，各地公安机关应当设立专门的打拐机构，配备必要的编制和专项经费。</p></dd><dt>爱的真言</dt><dd><p>我曾经喜欢八八，坚定只有八八才能给川儿幸福、只是最近几集，你让我情何以堪？感动，心疼，纠结，真的是不悲不喜了！现在我的心情。。很难过、不知道应该选择八八还是四四呢？</p></dd><dt>注意保重身体</dt><dd><p>还头痛吗？如果不是生病引起的头痛,我一般会听听音乐,自己喜欢的音乐,用心做自己的事固然是对的,但不要忽略自己的身体。</p></dd></dl>如果是通过网页运行代码的，需要刷新下才能看到效果。</body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

几个不错的自动收缩菜单导航效果
几个不错的自动收缩菜单导航效果...
2007-10-10
搜集了几个不错的下拉菜单效果
搜集了几个不错的下拉菜单效果...
2007-05-05
CSS TreeMenu 二级树形菜单示例
二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
2010-11-11
js无限级折叠菜单精简版
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。
2011-03-03
使用html+css+js实现导航栏滚动渐变效果
这篇文章主要介绍了使用html+css+js实现导航栏滚动渐变效果,鼠标向下拖动滚动条的时候导航栏会随着拖动有一个渐变动画效果,非常的炫酷,快来学习一下如何制作吧
2023-03-03
js仿土豆视频滚动菜单
比较漂亮的仿土豆视频导航菜单，漂亮大方
2008-05-05
纯CSS实现的竖向导航菜单
纯CSS实战竖向导航菜单，这也算是一个典型的CSS菜单啦，这里要用到两个背景图片，在鼠标动作时分别加载不同的背景图片，以达到反差给人的清新效果，其实这种菜单的制作是很简单的，代码量不大，作为初级者的教程还是很不错的。
2010-03-03
javascript实现的鼠标悬停时动态翻滚的导航条
鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。
2009-11-11
css 有弹动效果的网页导航
发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。思路是：背景图像定位！
2009-10-10
麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12

基于jquery的slideDown和slideUp做手风琴

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具