jQuery制作js下拉收缩js展开收起js显示隐藏效果.doc

jQuery制作js下拉收缩js展开收起js显示隐藏效果.doc

  1. 1、本文档共3页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 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-- /div p class=slidea href=javascript:; class=btn-slide active点击试试/a/p 就2段代码一个内容区域#panel 一个是下拉.slide 下面是css代码 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(/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/script script 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

文档评论(0)

2017ll + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档