jQuery折叠层，默认闭合，点击收缩和展开效果

发布时间：2018-08-13 23:39:37 所属栏目：活动来源：站长网

导读：刚刚介绍了一款利用 jQuery 实现的折叠层，点击收缩和展开效果，默认情况下是展开的，可能有的童鞋需要默认情况是闭合的，现在就来分享一下，这里主要是用 Java Script代码定义的，在此提示，第一次运行请刷新一下页面，让远程的jQuery插件载入。为解决一

　　刚刚介绍了一款利用jQuery实现的折叠层，点击收缩和展开效果，默认情况下是展开的，可能有的童鞋需要默认情况是闭合的，现在就来分享一下，这里主要是用JavaScript代码定义的，在此提示，第一次运行请刷新一下页面，让远程的jQuery插件载入。

　　为解决一些网页特效运行后不能显示效果(例如：jQuery则需要刷新)问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!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=gbk" /> <title>jquery 收缩展开效果</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <style> /* 收缩展开效果 */ .text{line-height:22px;padding:0 6px;color:#666;} .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} .box{position:relative;border:1px solid #e7e7e7;} h1{font-size:16px;} </style> </head> <body> <script type="text/javascript"> // 收缩展开效果 $(document).ready(function(){ // $(".box h1").toggle(function(){ // $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); // },function(){ //$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); / <p style="text-align:right;">（编辑：核心网）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.hxwgxz.com/html/huodong/20180822/488415.html" target="_blank">CSS完成未知宽高的图片水平、垂直居中代码</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20200718/649588.html" target="_blank">一里盟：“大众创业，老兵先行”研讨会圆满成功</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20191127/563044.html" target="_blank">“AI+数据”为未来起航，云从科技算法大赛赛题揭晓</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20190722/540014.html" target="_blank">铂爵旅拍打造 “明星级旅拍” 特色玩转互联网流量新时代</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20170617/465284.html" target="_blank">中国联通携华为建400G/1T联合创新中心</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20181222/508335.html" target="_blank">政治稳定和经济发展为区块链产业提供了哪些保障？</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20170616/464556.html" target="_blank">华为NE5000E路由1T线卡通过EANTC测试</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20181216/507339.html" target="_blank">物联网金融时代的来临</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20200817/652664.html" target="_blank">2020中国互联网大会互动展“5G和新基建”专场</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20170616/464565.html" target="_blank">让你的网络为火热的世界杯来袭做好准备</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.hxwgxz.com/html/huodong/20201118/665932.html" target="_blank">网站人工刷流量和软件刷流量哪个更安全</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201104/663436.html" target="_blank">seo快排技术安全吗是否安全决定于哪些因素</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20170615/464153.html" target="_blank">构筑智能网络 D-Link发布CROSS无线新品</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201107/664014.html" target="_blank">如何研究行业用户数据与热点追踪</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20200816/652582.html" target="_blank">第二届社群团购大会暨518社区社群团购节</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201210/669984.html" target="_blank">网站需要做404页面吗有什么作用</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20180822/488406.html" target="_blank">javascript 动态设置div层固定位置效果</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20170615/464157.html" target="_blank">既能上网又能营销艺创智能路由首测</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201210/669980.html" target="_blank">成都信息工程大学产业互联网研究院正式成立</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201122/666707.html" target="_blank">高质量外链如何产生</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.hxwgxz.com/ All Rights Reserved. 核心网</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>