资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
基于jquery的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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fdemo.glzy8.com%2Fjslib%2Fjquery%2Fjquery-1.4.2.min.js%22%3E%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%24(function()%7B%20%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E5%8F%98%E9%87%8F%20%0D%0Avar%20flag%20%3D%200%3B%20%0D%0Avar%20%24dt%20%3D%20%24('.slider%20dt')%3B%20%0D%0Avar%20%24dd%20%3D%20%24('.slider%20dd')%3B%20%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E7%8A%B6%E6%80%81%20%0D%0A%24dd.eq(0).show()%3B%20%0D%0A%24dt.eq(0).css('cursor'%2C'default')%3B%20%0D%0A%2F%2F%E5%8D%95%E5%87%BB%E4%BA%8B%E4%BB%B6%20%0D%0A%24dt.click(function()%7B%20%0D%0Aif(%24dt.index(this)%20%3D%3D%20flag)%20return%20false%3B%20%0D%0Aflag%20%3D%20%24dt.index(this)%3B%20%0D%0A%24dd.not(%24dd.eq(flag)).slideUp()%3B%20%0D%0A%24dd.eq(flag).slideDown()%3B%20%0D%0A%24dt.eq(flag).css('cursor'%2C'default').addClass('slider_open')%3B%20%0D%0A%24dt.not(%24dt.eq(flag)).css('cursor'%2C'pointer').removeClass('slider_open')%3B%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> </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需刷新才能执行
]
教程首页
更多教程