検索
ホームページウェブフロントエンドhtmlチュートリアル携帯電話の最初の画面の記事の展開と非表示_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:53 AM

     本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于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');  
      2. var class_index=class_lists.indexOf('isdown');  
      3. if(class_index==-1){
      4. $('.slideup').slideDown().addClass('isdown slidedown');  
      5. $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');  
      6. }else{
      7. $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');  
      8. $('.btn_click').html("展开もっと").removeClass('arrowup').addClass('arrowdown');  
      9. }
      10. });  
      11. $(document).ready(function(){
      12. var article_height=$('.slideup').height();
      13. //alert(article_height);
      14. 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を超える場合、初期状態では記事の余分な部分が非表示になっており、ボタンをクリックすると記事の余分な部分が表示され、ボタンの状態が変わります。同時。

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

    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    関連記事
    HTML、CSS、およびJavaScriptの理解：初心者向けガイドHTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

    webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

    HTMLの役割：Webコンテンツの構造HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

    HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

    HTMLとコード：用語を詳しく見るHTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

    htmlisaspecifictypeofcodefocuseduructuringwebcontent

    HTML、CSS、およびJavaScript：Web開発者に不可欠なツールHTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

    HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

    HTML、CSS、およびJavaScriptの役割：コアの責任HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

    HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

    HTMLは初心者のために簡単に学ぶことができますか？HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

    HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

    HTMLでの開始タグの例は何ですか？HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

    Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

    CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

    メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    もっと見る

    人気の記事

    R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    3週間前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最高のグラフィック設定
    3週間前By尊渡假赌尊渡假赌尊渡假赌
    アサシンのクリードシャドウズ：シーシェルリドルソリューション
    2週間前ByDDD
    R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
    3週間前By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25：Myriseのすべてのロックを解除する方法
    3週間前By尊渡假赌尊渡假赌尊渡假赌
    もっと見る

    ホットツール

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 最新バージョン

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強力な PHP 統合開発環境

    SecLists

    SecLists

    SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7468
    15
    CakePHP チュートリアル
    1376
    52
    Steamのアカウント名の形式は何ですか
    77
    11
    Win11 Activation Key Permanent
    48
    19
    NYTの接続はヒントと回答です
    19
    28
    もっと見る