资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
基于jQuery实现下拉收缩(展开与折叠)特效
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery下拉收缩特效</title> <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%2Fjquery1.3.2.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%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%24(document).ready(function()%7B%20%0D%0A%24(%22.btn-slide%22).click(function()%7B%20%0D%0A%24(%22%23panel%22).slideToggle(%22slow%22)%3B%20%0D%0A%24(this).toggleClass(%22active%22)%3B%20return%20false%3B%20%0D%0A%7D)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #69C7F7; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #F27613; } .btn-slide { background: #F27613 url(http://files.glzy8.com/file_images/article/201212/20121225165932118.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> </head> <body> <h1>演示不了 请刷新下</h1> <div style="display: block;" id="panel"> <!-- you can put content here --> </div> <p class="slide"><a href="javascript:;" _ewebeditor_ta_href="javascript%3A%3B" class="btn-slide active">点击试试</a></p> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程