jquery简单的展开收起效果代码

如今,很多WordPress主题都有这种功能,就是在文章内容中将部分内容折叠起来,这样会导致文章内容不至于太长,用户也有耐心看下去。今天我来说下这种效果的简单实现方法。首先,实现这种效果的前提是网站需要引入高于1.7版本的jquery脚本(当然现在很多网站都引入了此脚本)。

HTML代码

<div class="panel">
<p>技术宅-专注技术,专注分享</p>
<p>技术宅,专注分享,专注技术!分享互联网科技新闻轶事,分享生活小常识,各种数码使用小技巧!</p>
</div>
<p class="flip"><span class="1">展开</span><span class="2" style="display:none;">收起</span></p>

[alert type=”warning” icon=”” size=”0″]大家在使用的时候只要css选择器不变以及隐藏文字的css保留即可,其他都可根据自己的网站风格进行修改美化![/alert]

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;}

jquery代码

<script type="text/javascript">
$(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
    $(".xs1").toggle();
    $(".xs2").toggle();
  });});
</script>

以上就是全部代码了,大家自行研究具体的CSS来契合自己的站点!比通过引入其他js实现要方便很多。

技术分享

在 Linux 上安装应用程序

2018-3-29 2:18:32

技术分享

简单配置高性能Apache Web 服务器

2018-4-4 3:04:53

    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
站点地图