问题前言
网页建设中需要对文本图片盒子等实现点击展开收缩功能,动态关闭展开,要怎么实现呢?
解决方案
1. 引入jQuery文件
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
2. jQuery主代码
<script type="text/javascript"> $(document).ready(function(){ $(".slide-up").click(function(){ $(".box").slideUp(); }); $(".slide-down").click(function(){ $(".box").slideDown(); }); }); </script>
3. 完整代码
<!DOCTYPE html> <html> <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="http://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">关闭</button> <button type="button">展开</button> <hr> <div> <div> 人,这一生总会遇到磕磕碰碰,遇到低谷期,遇到我们难以突破的困境。米歇潘曾说:“生命是一条艰险的峡谷,只有勇敢的人才能通过。”没有人的人生,会一帆风顺;但是也没有人的人生,会一直糟糕到底。有的人,将自己的生活,越过越好,而有的人却将自己的生活,越过越苦。其实,经营生活靠的是心态,靠的是格局与眼界。一个人的格局越大,眼界越宽阔,心态变好,那么他的人生就会越过越好。即便,遇到了考验,遇到了挫折,也会很快绝地反弹。当你感觉生活不顺时,记住三句话,日子会越来越好,运气也会与你常伴。 </div> </div> </body> </html>
使用效果
使用说明
请根据自己实际情况做相应修改