携帯電話の最初の画面の記事の展開と非表示_html/css_WEB-ITnose

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

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

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

 

HTML代码如下：

Html代码  

1. 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;b order:1px solid #fff;text -align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}

1. .the_height{height: 450px;}
2. .slidedown{高さ: 自動;}
3. .btn_click{表示: ブロック;幅: 120px;高さ: 30px;位置:相対;行の高さ:30px;マージン: 10px 自動;カラー: #fff;背景: #999;text-align : center;text-decoration: none;text-indent:-1em;border-radius: 5px;}
4. .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;位置: 絶対;上: 10px;右:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}
5. .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);}
6. .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) ;}
7. .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 (関数(){

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 $('.btn_click').hide();
14. $('.slideup').addClass('slidedown');
15. }else{
16. $('.slideup')クラス('the_height' );
17. }
18. });  

最大终效果如下：

如果文字高

大以上450px

、就隐藏、如下：

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

这里も有以下の注目点と大家の発言:

1. 最初のダウンロード時の状態:

照按钮の状態、1 つは文章の高さが 450px より大きいとき、按钮隐藏; 2 番目は文章の高さが 450px より小さいとき、按钮表示ボタンが表示されると、文章が受信されている状態と文章が展開されている状態の 2 つの状態に分かれます。

2. CSS キー分析: .slideup: ページの読み込み時にページの初期スタイルを設定します。記事の高さが 450 ピクセルを超える場合は、このクラスを追加します。 : 記事を展開するときのスタイルを設定します。;.btn_click: ボタンの初期スタイルを設定します。 .arrowup:after、.arrowup:before、.arrowdown:after、.arrowdown:before はそれぞれ、記事を展開するときの矢印の方向を設定します。

3.js コード分析: HTML ドキュメントが読み込まれた後、最初に判断を行い、記事の高さが 450px 未満の場合は、記事を通常に表示し、展開と折りたたみのボタンを非表示にします。 ; 記事の高さが 450px を超える場合は、記事の高さを 450px に設定し、展開して折りたたむと、スタートボタンが表示されます。次に、記事の高さが450pxを超える場合、初期状態では記事の余分な部分が非表示になっており、ボタンをクリックすると記事の余分な部分が表示され、ボタンの状態が変わります。同時。

携帯電話での記事の表示と非表示についてまとめました。さらに情報を共有していただければ幸いです。