本人做的是手機端的前端開發(fā)，事事處處都得從手機用戶的體驗著手考慮。大家都知道手機相對于pc來說要小很多，所要容納的東西相對于pc來說也要少之又少。一些重要的東西又希望用戶在打開手機網站的第一屏就能看到，這時就要盡可能地將重點呈現給用戶。

內容又由文字，圖片等等信息組成，如果文字過長，就顯得冗余，這里就為大家介紹一個如何隱藏多余文字和展開多余文字的方法。

需要的技術支持：CSS3，一般jQuery庫；

HTML代碼如下：

Html代碼 This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.

CSS代碼如下：

Css代碼 .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;}

.the_height{height: 450px;}

.slidedown{height: auto;}

.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;}

.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);}

.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);}

.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);}

.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代碼 $('.btn_click').click(function(){

var class_lists=$('.slideup').attr('class');

var class_index=class_lists.indexOf('isdown');

if(class_index==-1){

$('.slideup').slideDown().addClass('isdown slidedown');

$('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');

}else{

$('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');

$('.btn_click').html("展開更多").removeClass('arrowup').addClass('arrowdown');

}

});

$(document).ready(function(){

var article_height=$('.slideup').height();

//alert(article_height);

if(article_height<=450){

$('.btn_click').hide();

$('.slideup').addClass('slidedown');

}else{

$('.slideup').addClass('the_height');

}

});

最終效果如下：

如果文字高度大于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)改變。

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

本文原創(chuàng)發(fā)布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的php中隐藏和展开文章,手机端第一屏页面文章的展开和隐藏_html/css_WEB-ITnose的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。