jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

さっそくコードを見てみましょう

<!DOCTYPE html>
<html lang="ja">
 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>記事</title>
 </head>
 <本文>
  <div>
   <p>記事の折りたたみと展開機能</p>
   <div class="item">
    <div>
     <div style="color: #409EFF;">文字数制限を超えています</div>
     <span class="article">
      MQTT は、オープン、シンプル、軽量、実装が容易になるように設計された、軽量のプロキシベースのパブリッシュ/サブスクライブ メッセージ伝送プロトコルです。
      これらの機能により、制約のある環境での使用に適しています。ネットワークは高価で、帯域幅が低く、信頼性が低いです。
      プロセッサとメモリのリソースが制限された組み込みデバイス上で実行します。この契約の特徴は次のとおりです。
      パブリッシュ/サブスクライブ メッセージング モデルを使用して、1 対多のメッセージ パブリッシングを提供し、アプリケーションを分離します。
      ペイロード コンテンツがシールドされたメッセージ送信。
      TCP/IP を使用してネットワーク接続を提供します。
     </span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">単語数を超えない</div>
     <span class="article">ABCDEFGHIJKLNMOPQRSTUVWXYZ</span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
   <br />
   <div class="item">
    <div>
     <div style="color: #409EFF;">文字数制限を超えています</div>
     <span class="article">
      MOS の正確さは、主にハードディスクの種類を参照して、ハードディスクの正常な使用に直接影響します。
      幸いなことに、現在のマシンはすべて「IDE 自動検出」機能をサポートしており、ハードディスクの種類を自動的に検出できます。
      新しいハードディスクを接続したり、ハードディスクを新しいものに交換したりする場合は、この機能を使用してタイプをリセットする必要があります。
      もちろん、現在では一部のタイプのマザーボードはハードドライブのタイプを自動的に識別できます。
      ハードディスクの種類が間違っていると、システムがまったく起動できない場合や、起動できても読み取りおよび書き込みエラーが発生する場合があります。
     </span>
     <span class="see" style="color: #409EFF;"></span>
    </div>
   </div>
  </div>
 </本文>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(ドキュメント).ready(関数(){
   //記事の現在のステータスを記録します var onoff = false;
   //各記事を走査して設定するには$().eachを使用します$('.item').each(function() {
    // $(this).find() を使用して現在の記事の DOM を取得します
    var article = $(this).find('.article');
    //記事の内容を取得します。var str = article.text();
    // $(this).find() を使用して展開された DOM と折りたたまれた DOM を取得します
    var see = $(this).find('.see');
    //記事が50語を超える場合、最初の50語のみが表示されます if (str.length > 50) {
     記事.text(str.substr(0, 50) + '......');
     see.text('[View]'); //記事の最後に表示ボタンを表示します}
    //ボタンリスナーを設定するsee.click(function() {
     if (オンオフ) {
      記事.text(str.substr(0, 50) + '......');
      see.text('[表示]');
     } それ以外 {
      記事のテキスト(str);
      see.text('[收起]');
     }
     オンオフ = !オンオフ
    });
   });
  });
 </スクリプト>
</html>