很简单的一个jQuery特效,点击展开收缩,大部分站长们的网站中或多或少的用到了这个效果,有木有感慨,真特么简单哈,给不懂jQuery白的不能再白的小白站长用,大神们请绕路哈,感谢
<a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a> <!DOCTYPE html> <html> <head> <title>展开收缩-柏平博客原创</title> <script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">http://www.zbpnice.cn</p> <button>点击这里</button> </body> </html>
以上效果是否感觉有点别扭嘞,要想使上面的效果点击一下展开,点击一下收缩,请移步到下面观看:
<a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a> <!DOCTYPE html> <html> <head> <title>展开收缩-柏平博客原创</title> <script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { var i=0; $("button").bind("click",function() { if(i==0){ $("#p1").slideUp("slow"); i=1; }else { $("#p1").slideDown(1500); i=0; } }); }); </script> </head> <body> <p id="p1" style="color:#06F; display:none">http://www.zbpnice.cn</p> <button>点击这里</button> </body> </html>
其实还有种更简单的方法,你知道么??
啥,你知道?
我去,知道就知道呗,又不妨碍我装逼。
来来来,围观toggle()用法,以下贴代码:
<a href="http://www.zbpnice.cn" style="color:#06F; display:none">http://www.zbpnice.cn</a> <!DOCTYPE html> <html> <head> <title>展开收缩-柏平博客原创</title> <script src="https://www.zbpnice.cn/demo/12/js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").slideToggle("slow"); }); }); </script> </head> <body> <p id="p1" style="color:#06F; display:none">http://www.zbpnice.cn</p> <button>点击这里</button> </body> </html>
看了这个,是不是超简单,一行代码解决。
啥,为啥不早拿出来?
我去,早拿出来,我拿什么装逼,是吧。
还没有留言,还不快点抢沙发?