jquery特效点击展示与隐藏全文_jquery

来源：明星茬娱乐

本文实例讲述了jquery点击展示与隐藏全文特效，这里使用jquery实现展开、隐藏特效，点击查看全文后内容展开，点击收起全文其内容收缩，分享给大家供大家参考。具体如下：

运行效果截图如下：

具体代码如下

一、来看一下主体框架程序：



 
 
 点击查看全文

上面程序布局需要注意的是名字为“content”的div里面的内容需要与省略号“. . .”以前的文字保持一致，也就是重复一段文字。

原因：因为省略号“. . .”以前的文字会在点击“查看全文”按钮的时候隐藏，如果不隐藏省略号“. . .”之前的文字的话，它会在点击“查看全文”按钮后“. . .”不消失，这样文章就不能顺利阅读了~~~~

二、下面来看看样式：

*{
 padding: 0;
 margin: 0;
}
.showAll{
 width: 60%;
 margin: 0 auto;
 background: #ecebeb;
 padding: 10px;
}
.showAll .title{
 font-size: 20px;
 font-weight: bold;
 color:#af0015;
}
.showAll .author{
 color: #a1a1a1;
 margin: 12px 0;
}
.showAll .content{
 display: none; //注意这里让文字不显示
}

上面需要注意的是需要给名字为“content”的div隐藏，这样点击“查看全文”按钮后才可以触发显示事件。
三、Jquery程序：

希望本文所述对大家学习jquery程序设计有所帮助。