大家在写长文章的时候喜欢把一些内容给折叠起来，当用户有需要的时候点击展开阅读，不仅提高了页面的布局美观性还让文章看起来没有那么长，用户也有耐心看下去，今天就给大家分享一段简单的jquery展开收起特效而且带展开动画效果哦，现在大多数网站都引入了jquery脚本，如果没有的话那么请自己到百度前端公共库中找到适合的jquery文件下载引入只要版本高于1.7即可。
html代码
- <div class=“panel”>
- <p>晨星博客 – 专注网站SEO优化及wordpress主题开发</p>
- <p>晨星博客（ChenXingWeb.Com）专注WordPress程序周边及开发和南阳地区seo诊断，旨在为大家提供优质主题资源和服务，解决广大站长的建站需求。</p>
- </div>
- <p class=“flip”><span class=“1”>展开</span><span class=“2” style=“display:none;”>收起</span></p>
[demo]https://pan.baidu.com/s/1-oJYL7BbKTsgeQtMC3_CEw[/demo]
大家在使用的时候只要css选择器不变以及隐藏文字的css保留即可，其他都可根据自己的网站风格进行修改美化！
css代码
- <style type=“text/css”>
- .panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}
- .flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}
- </style>
jquery代码
- <script type=“text/javascript”>
- $(function(){
- $(“.flip”).click(function(){
- $(“.panel”).slideToggle(“slow”);
- $(“.xs1”).toggle();
- $(“.xs2”).toggle();
- });});
- </script>
相信这是最简洁的代码了比网上那些动辄几K的性能要好很多，主要看大家的美化了，我就不给大家提供过多的css代码毕竟这个功能要整合到各自的网站中，我写的样式并不能契合所有主题，大家还是自己动动手好了！
解压密码我不知道啊
很优秀
很好
very good;非常好
试试
看了代码好简单啊，哈哈哈
非常好