- 1、本文档共3页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
jQuery制作js下拉收缩js展开收起js显示隐藏效果
PHP教程网: HYPERLINK PHP博客:
PAGE
PAGE 3
HYPERLINK /jquery/542.html jQuery制作js下拉收缩、js展开收起、js显示隐藏效果
文章来源: HYPERLINK /jquery/542.htm /jquery/542.htm
今天发布一个jquery基础教程--jQuery制作js下拉收缩、js展开收起、js显示隐藏效果!废话不多说了先上效果图素材图片下拉上下图标下载下面切入正题先引入jquery.js框架就不说了然后写html代码
div style=display: block; id=panel!-- content--/divp class=slidea href=javascript:; class=btn-slide active点击试试/a/p
就2段代码一个内容区域#panel一个是下拉.slide下面是css代码
style type=text/cssbody { 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(/images/jstx/white-arrow.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
重点是.btn-slide样式background背景颜色和下拉小图标因为用到图片组合在一张图片上所以用到背景定位right -50px;最后放出jquery代码,
script type=text/javascript src=/templets/niu/js/jquery.min.js/scriptscript type=text/javascript$(document).ready(function(){$(.btn-slide).click(function(){//当点击黄色块触发silideToggle$(#panel).slideToggle(slow);$(this).toggleClass(active); return false;//触发后然后改变小图标方向,css在.active定义的});});/script
演示地址: HYPERLINK /js_texiao/541.html /js_texiao/541.htmll
您可能关注的文档
最近下载
- HG╱T 3655-2012 紫外光(UV)固化木器涂料.pdf
- 人民警察警示教育观看心得.docx VIP
- Q-GDW-智能变电站辅助控制系统设计技术规范.pdf
- 外教社2023中国文化英语综合教程 上册 Unit 3 PPT课件(试用版).pptx
- 乡镇临床执业助理医师:甲状腺功能亢进症考试题.docx VIP
- 冀教版七年级上册数学《角的大小》教学说课研讨课件复习.pptx VIP
- 全国智能制造应用技术技能竞赛题及答案.doc VIP
- 智慧园区管理平台建设方案.pdf
- XX职业技术学院关于大数据与会计专业实习的实施方案.docx
- GBT 50034-2024 建筑照明设计标准.docx VIP
文档评论(0)