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代码毕竟这个功能要整合到各自的网站中,我写的样式并不能契合所有主题,大家还是自己动动手好了!

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

59条评论

  • c  

    asdasd

    •  

      @c 感觉不错 很好

    • GOGO查扎蔡  

      @c 还行

  • 123  

    非常不错

  • 唐放金®知音装饰  

    看看这个功能效果

  • 环络网  

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

  • Q14781609448  

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

  • 小女孩  

  • Mr. Peng  

    公司是人提供人体

  • 最爱希素  

  • Jane  

    厉害

  • ~逝水▽流年~  

    看了代码好简单啊,哈哈哈

  • 张健--上海SE互联设计  

    挺不错

  • owen纽亚  

    6666 简单

  • 坐看云起云落  

    我来试试这个功能

  • 坐看云起云落  

    保存链接失效了

  • qzuser  

    保存链接失效了

  • qzuser  

    我来试试这个功能

  • qzuser  

    分享取消了 怎么搞呀

  • 尽头💭。  

    好 不错

  • 蝴蝶  

    挺好的

  • 789456307  

    看了代码好简单啊,哈哈哈

  • Longtimeago  

    ……………….. 试试看

  • ☆漂流→瓶㊣  

    找了好久终于找到这样一款实用的代码了

  • Goodluck  

    好着

  • 中二病  

    很棒的

  •  

    很棒的的

  • xiaowiba  

    赞!

  • 少帅°  

    发的所发生的

  • 尼欧Λ一方通行  

    在一个页面上使用两个以上的展开收起,它不能分开判断啊,展开第一个,第二个也一起展开了,这怎么办?

  • 踢球过周末  

    不错啊;下载来试试。

  • 般若一念  

  • 张小沅  

    好像很简单实用,试试效果~

  • 凯蒂  

    看一下

  • 看客  

    好简洁,试试!

  • 小月亮(网页/平面)  

    效果很好,代码简洁

  • 小月亮(网页/平面)  

    是我想要的效果。

  • 小月亮(网页/平面)  

    试用下

  • 南风  

    很不错的小功能

  • 南风  

    分享取消了。。。。。。。。

  • 枫叶飘零的晚秋  

    很不错的功能

  • 夏日不热  

    很不错的小功能

  • 咋得  

    不错

  • 泰太太  

  • 你猜♥不透♥  

    支持

  • ~努力的废柴~  

  • Barbara  

    不错不错

  • 徐良  

    厉害,是俺需要的

  • 徐良  

    解压密码是什么啊

  • 1134237941  

    牛皮牛皮666

  • 微尘  

    号不

  • 承诺~0.0  

    非常棒

  • 清风  

    非常好

  • akun  

    看了代码好简单啊,哈哈哈

  • 雨落倾城°  

    试试

  • 追梦行者  

    very good;非常好

  • 守候灬那最美的  

    很好

  • 灬/无她无爱💨  

    很优秀

  • 灬/无她无爱💨  

    解压密码我不知道啊

评论已关闭!