网页上常常会有这样的功能：我们在阅读文章的时候，通常会遇到文章下面出现“阅读更多 阅读全文 展开 More”等字样，一点击就会显示或展开更多的内容给访问者查看。如下图。
这种功能如何实现呢？网上讲的很多，并且也会复杂，本人改良了一下，得出最简单的代码，下面拿出来与大家分析。
一、简单的CSS
.MyArticleContent{
position: relative;
height: 300px;
overflow: hidden;/*设置文章容器高度，超出部分隐藏*/
}
.ReadAllArtilce-btn{
position: relative;
bottom: 0;
height: 200px;
text-align: center;
background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/*实现渐变效果，遮罩效果*/
margin-top: -200px;
}
.ReadAllArtilce-btn a{
text-decoration: none;
color: chocolate;
display: inline-block;
margin-top: 180px;
}
二、网页用到的DIV
<div class="MyArticleContent" id="MyArticleContent">
<P>
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
</P>
<div class="ReadAllArtilce-btn" id="ReadAllArtilce">
<a onclick="showMoreArticle()"><strong>阅读全文</strong></a>
</div>
</div>
三、借助Jquery
使用Jquery的目的是用来点击“阅读全文”让该按钮隐藏并显示全文的。
该Jquery在网页的Head区域进行引用，如：<script src="jquery-2.0.0.min.js">
四、JS代码
<script>
function showMoreArticle() {
$("#MyArticleContent").height("auto");//取消文字容器高度限制
$("#ReadAllArtilce").hide();//隐藏查看更多按钮
}
</script>
JS代码放在Body的最下面。