欢迎访问晨星博客!

  • 当前位置: 首页 Web前端 正文

    分享一款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>

    [demo]https://pan.baidu.com/s/1-oJYL7BbKTsgeQtMC3_CEw[/demo]

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

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 63 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. 灬/无她无爱💨

      解压密码我不知道啊

    2. 灬/无她无爱💨

      很优秀

    3. 守候灬那最美的

      很好

    4. 追梦行者

      very good;非常好

    5. 雨落倾城°

      试试

    6. akun

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

    7. 清风

      非常好

    账号登陆

    快捷登陆