常用jq效果参考链接：jQuery 参考手册 - 效果参考链接：jquery slide使用总结 - Horan

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

slideToggle 点击可以实现带过渡效果的从上到下展开关闭

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>

slideUp

slideDown

参考链接：jQuery 参考手册 - 效果

参考链接：jquery slide使用总结 - Horan - 博客园