手机端第一屏页面文章的展开和隐藏

本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多，所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到，这时就要尽可能地将重点呈现给用户。

内容又由文字，图片等等信息组成，如果文字过长，就显得冗余，这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。

需要的技术支持：CSS3，一般jQuery库；

HTML代码如下：

1. <divclass="slideup">ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutJavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.ThisisatestaboutjavascriptfunctionslideUpandslideDown.
2. </div>
3. <ahref="javascript:void(0)"class="btn_clickarrowdown">展开更多</a>

CSS代码如下：

1. .slideup{width:320px;height:auto;overflow:hidden;margin:0auto;border:1pxsolid#fff;text-align:center;padding:10px;background:#999;color:#fff;font-weight:bold;border-radius:008px8px;}
2. .the_height{height:450px;}
3. .slidedown{height:auto;}
4. .btn_click{display:block;width:120px;height:30px;position:relative;line-height:30px;margin:10pxauto;color:#fff;background:#999;text-align:center;text-decoration:none;text-indent:-1em;border-radius:5px;}
5. .arrowup:after{content:"";width:8px;height:8px;border:3pxdouble#fff;position:absolute;top:10px;right:18px;border-width:3px3px00;-webkit-transform:rotate(-45deg);}
6. .arrowup:before{content:"";width:6px;height:6px;border:1pxsolid#fff;position:absolute;top:15px;right:20px;border-width:1px1px00;-webkit-transform:rotate(-45deg);}
7. .arrowdown:after{content:"";width:8px;height:8px;border:3pxdouble#fff;position:absolute;top:8px;right:18px;border-width:3px3px00;-webkit-transform:rotate(135deg);}
8. .arrowdown:before{content:"";width:6px;height:6px;border:1pxsolid#fff;position:absolute;top:7px;right:20px;border-width:1px1px00;-webkit-transform:rotate(135deg);}

js代码如下：

1. $('.btn_click').click(function(){
2. varclass_lists=$('.slideup').attr('class');
3. varclass_index=class_lists.indexOf('isdown');
4. if(class_index==-1){
5. $('.slideup').slideDown().addClass('isdownslidedown');
6. $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');
7. }else{
8. $('.slideup').slideDown().addClass('the_height').removeClass('isdownslidedown');
9. $('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');
10. }
11. });
12. $(document).ready(function(){
13. vararticle_height=$('.slideup').height();
14. //alert(article_height);
15. if(article_height<=450){
16. $('.btn_click').hide();
17. $('.slideup').addClass('slidedown');
18. }else{
19. $('.slideup').addClass('the_height');
20. }
21. });

最终效果如下：

如果文字高度大于450px，就隐藏，如下：

通过点击展开更多按钮即可展开更多文字，如下：

这里也有几个重点和大家说下：

1.页面第一次加载时的状态：按照按钮的状态分，一是文章高度大于450px时，按钮隐藏；二是文章高度小于450px时，按钮显示。当按钮显示时，又分为两个状态，即为文章收起的状态和文章展开的状态；

2.CSS重点解析：.slideup:设置页面加载时页面的初始样式；.the_height:设置页面加载时，如果文章高度大于450px时，就添加该类；.slidedown:设置文章展开时的样式；.btn_click:设置按钮的初始样式；.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分别为文章展开和收起时的箭头的方向设置；

3.js代码解析：当HTML文档加载完毕后，先做一个判断，如果文章高度小于450px，那么就正常显示文章，展开收起按钮隐藏；如果文章高度大于450px，就将文章的高度设置为450px，展开收起按钮显示。接下来，如果文章的高度大于450px，初始状态为文章超出部分隐藏，点击按钮后，文章超出部分显示，同时按钮的状态改变。

这是对手机端文章显示和隐藏的一个总结，望多多交流。