Wordpress主题交流群:565616228 进群记得看公告!

分享一款jquery简单的展开收起效果代码

文章目录
  1. html代码
  2. css代码
  3. jquery代码

大家在写长文章的时候喜欢把一些内容给折叠起来,当用户有需要的时候点击展开阅读,不仅提高了页面的布局美观性还让文章看起来没有那么长,用户也有耐心看下去,今天就给大家分享一段简单的jquery展开收起特效而且带展开动画效果哦,现在大多数网站都引入了jquery脚本,如果没有的话那么请自己到百度前端公共库中找到适合的jquery文件下载引入只要版本高于1.7即可。

html代码

  1. <div class="panel">
  2. <p>晨星博客 - 专注网站SEO优化及wordpress主题开发</p>
  3. <p>晨星博客(ChenXingWeb.Com)专注WordPress程序周边及开发和南阳地区seo诊断,旨在为大家提供优质主题资源和服务,解决广大站长的建站需求。</p>
  4. </div>
  5. <p class="flip"><span class="1">展开</span><span class="2" style="display:none;">收起</span></p>
查看效果保存代码评论后刷新页面再来下载吧!尽量避免敏感词汇哦要不然需要管理员审核通过才能下载。。

大家在使用的时候只要css选择器不变以及隐藏文字的css保留即可,其他都可根据自己的网站风格进行修改美化!

css代码

  1. <style type="text/css">
  2. .panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}
  3. .flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}
  4. </style>

jquery代码

  1. <script type="text/javascript">
  2. $(function(){
  3. $(".flip").click(function(){
  4.     $(".panel").slideToggle("slow");
  5.     $(".xs1").toggle();
  6.     $(".xs2").toggle();
  7.   });});
  8. </script>

相信这是最简洁的代码了比网上那些动辄几K的性能要好很多,主要看大家的美化了,我就不给大家提供过多的css代码毕竟这个功能要整合到各自的网站中,我写的样式并不能契合所有主题,大家还是自己动动手好了!

来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!
评论广告

6条评论

  • c  回复

    asdasd

  • 123  回复

    非常不错

  • 唐放金®知音装饰  回复

    看看这个功能效果

  • 环络网  回复

    不错,直接拷贝过去就能用了,哈哈

  • Q14781609448  回复

    提问、那请问侧边的怎么实现呢?因为感觉侧边栏使用的效果比较多吧?后台系统电商网站几乎都会那样子做的、

  • 小女孩  回复

昵称*

邮箱*

网址