?

CSS代碼如下：

Css代碼??

1. .slideup{width:320px;height:auto;overflow:hidden;margin:0?auto;border:1px?solid?#fff;text-align:?center;padding:?10px;background:?#999;color:#fff;font-weight:bold;border-radius:?0?0?8px?8px;}??
2. .the_height{height:?450px;}??
3. .slidedown{height:?auto;}??
4. .btn_click{display:?block;width:?120px;height:?30px;position:relative;line-height:30px;margin:?10px?auto;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:?3px?double?#fff;position:?absolute;top:?10px;right:18px;border-width:?3px?3px?0?0;-webkit-transform:rotate(-45deg);}??
6. .arrowup:before{content:?"";width:?6px;height:?6px;border:?1px?solid?#fff;position:?absolute;top:?15px;right:20px;border-width:?1px?1px?0?0;-webkit-transform:rotate(-45deg);}??
7. .arrowdown:after{content:?"";width:?8px;height:?8px;border:?3px?double?#fff;position:?absolute;top:?8px;right:18px;border-width:?3px?3px?0?0;-webkit-transform:rotate(135deg);}??
8. .arrowdown:before{content:?"";width:?6px;height:?6px;border:?1px?solid?#fff;position:?absolute;top:?7px;right:20px;border-width:?1px?1px?0?0;-webkit-transform:rotate(135deg);}??

?

js代碼如下：

Js代碼??

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

? ? ?

? ? ? 最終效果如下：

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

? ? ? 通過點擊展開更多按鈕即可展開更多文字，如下：

? ? ?

這里也有幾個重點和大家說下：

1.頁面第一次加載時的狀態(tài)：按照按鈕的狀態(tài)分，一是文章高度大于450px時，按鈕隱藏；二是文章高度小于450px時，按鈕顯示。當按鈕顯示時，又分為兩個狀態(tài)，即為文章收起的狀態(tài)和文章展開的狀態(tài)；

2.CSS重點解析：.slideup:設置頁面加載時頁面的初始樣式；.the_height:設置頁面加載時，如果文章高度大于450px時，就添加該類；.slidedown:設置文章展開時的樣式；.btn_click:設置按鈕的初始樣式；.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分別為文章展開和收起時的箭頭的方向設置；

3.js代碼解析：當HTML文檔加載完畢后，先做一個判斷，如果文章高度小于450px，那么就正常顯示文章，展開收起按鈕隱藏；如果文章高度大于450px，就將文章的高度設置為450px，展開收起按鈕顯示。接下來，如果文章的高度大于450px，初始狀態(tài)為文章超出部分隱藏，點擊按鈕后，文章超出部分顯示，同時按鈕的狀態(tài)改變。

? ? ? 這是對手機端文章顯示和隱藏的一個總結(jié)，望多多交流。