基于jquery的slideDown和slideUp做手风琴

更新时间：2011年02月12日 15:47:52 作者：

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需再刷新一下页面才能执行]

您可能感兴趣的文章:

超级susymenu实现top菜单
超级susymenu实现top菜单...
2007-09-09
用js实现的比较经典实用的触发型导航菜单
用js实现的比较经典实用的触发型导航菜单...
2007-03-03
javascript 静态树菜单实现代码
coding这么多年，我居然不知道有"dl"这种html标记，惭愧啊，今天偶然发现，觉得好玩，如是我为它添加了折叠功能，变成了一颗静态树.
2010-12-12
爆炸式的JS圆形浮动菜单特效代码
爆炸式的JS圆形浮动菜单特效代码，点击主菜单后，子菜单会爆炸式展开，挺有意思的。
2010-03-03
一个不错的渐显菜单
一个不错的渐显菜单...
2007-05-05
js实现的非常棒的绿色下拉透明菜单
js实现的非常棒的绿色下拉透明菜单...
2007-03-03
基于jquery的淡入淡出选项卡效果代码
经典的Tab选项卡代码,淡入淡出,jquery插件版,希望大家能够喜欢,简洁未过多美化.
2010-06-06
用js实现网页上模仿桌面右键菜单
用js实现网页上模仿桌面右键菜单...
2007-03-03
js 浮动层菜单收藏
最近做了一个通用的浮动层菜单替代函数，可以方便地把传统的 SELECT 单选菜单替换成时尚的浮动层菜单。
2009-01-01
腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二
腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二...
2007-03-03