下面我们就结合具体的代码示例，给大家介绍jquery实现点击展开收缩效果的方法。
代码示例如下：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="utf-8"> <Title>jquery实现点击展开收缩效果示例</Title> <style type="text/CSS"> .Box{ wIDth: 400px; background: #f0e68c; border: 1px solID #a29415; } .Box-inner{ padding: 10px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.Js"></script> <script type="text/JavaScript"> $(document).ready(function(){ $(".slIDe-up").click(function(){ $(".Box").slIDeUp(); }); $(".slIDe-down").click(function(){ $(".Box").slIDeDown(); }); }); </script></head><body><button type="button" class="slIDe-up">关闭</button><button type="button" class="slIDe-down">展开</button><hr><div class="Box"> <div class="Box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体 合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防dRM流利的英文演讲开场，到最后防d内 心告白曾想解散，全场零冷场。</div></div></body></HTML>上述代码中，我们创建了两个div，Box和包含文字的Box-inner，当我们点击关闭、展开按钮时，就会分别调用slIDeUp()和slIDeDown()方法。
slIDeUp()方法通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
slIDeDown()方法通过使用滑动效果，显示隐藏的被选元素。
最终效果如下图：
注：slIDeDown() 适用于通过 jquery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hIDden 隐藏的元素）。
本篇文章就是关于jquery实现点击展开收缩效果的具体方法介绍，非常简单，希望对需要的朋友有所帮助！ 总结
以上是内存溢出为你收集整理的如何用jquery实现点击展开收缩效果全部内容，希望文章能够帮你解决如何用jquery实现点击展开收缩效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）