页面展开收起php代码,jquery简单的展开收起效果代码

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

HTML代码

技术宅-专注技术，专注分享

技术宅，专注分享，专注技术！分享互联网科技新闻轶事，分享生活小常识，各种数码使用小技巧！

展开收起

[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代码

$(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

$(".xs1").toggle();

$(".xs2").toggle();

});});

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

页面展开收起php代码,jquery简单的展开收起效果代码相关推荐

水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
完整简单c语言程序代码,一些简单的C语言程序代码.docx
一些简单的C语言程序代码由键盘任意输入1个4位数整数,分别输出其中的个位.十位.百位.千位./* expe 3-10 */#include #include void main(void){ int ...
jquery如何实现ajax技术,使用JavaScript和jQuery简单实现Ajax技术(示例代码)
Ajax的定义 Ajax被认为是(Asynchronous JavaScript and XML的缩写). 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax的工作原理 Aja ...
jquery 简单的进度条实现代码
网页结构: 代码如下: <div id="center"> <div id="message"></div> <di ...
php图片滑动代码,jQuery如何实现图片滑动效果
图片滑动在很多地方都需要,本文主要介绍了jQuery实现图片滑动效果的实例,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 思路:当鼠标进入元素时,触发hover中的第一个函数,离开 ...
代码画简单动物_[500行代码学懂OpenGL]之六数学知识
数学知识之前我们说有三个方向可以走 - 光.纹理.数学.然后我们简单看了一个光的例子来学习z-buffer和纹理,现在我们来看一下相关的数学知识.这些也很重要. 需要了解的概念包括: 矩阵是如何变换 ...
java简单记事本代码_简单记事本的java程序代码
展开全部天啊, 冖_Na0 为什么会有62616964757a686964616fe4b893e5b19e31333262343038我编的记事本代码呢???呵呵--你肯定是"请教&quo ...
计算器的程序代码java_java 简单的计算器程序实例代码
java 简单的计算器程序实现实例: import java.awt.*; import java.awt.event.*; import javax.swing.*; public class c ...
用html制作广告图片切换效果,基于jquery实现图片广告轮换效果代码
效果图: 实现代码: hotmarquee * { margin: 0; padding: 0; } body { font: 12px; padding-top: 50px; padding-rig ...

页面展开收起php代码,jquery简单的展开收起效果代码

页面展开收起php代码,jquery简单的展开收起效果代码相关推荐

最新文章

热门文章