jquery一个来回伸展收缩的slideUp和slideDown函数网页代码|jQuery|柏平博客

很简单的一个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>

看了这个，是不是超简单，一行代码解决。

啥，为啥不早拿出来？

我去，早拿出来，我拿什么装逼，是吧。