jqueryテキストを非表示にするクリックして詳細を表示する-フロントエンドQ&A-php.cn

jqueryテキストを非表示にするクリックして詳細を表示する

王林

リリース： 2023-05-18 14:33:39

オリジナル

688 人が閲覧しました

インターネット技術の発展に伴い、Web サイトのユーザーエクスペリエンスはますます注目を集めています。ウェブサイトのデザインにおいては、コンテンツをいかに適切に表示し、ユーザーの読書体験を向上させるかが重要なテーマとなっています。

長いページコンテンツの場合、ページが長くなりすぎないように、通常はテキストを折りたたんだり、さらにクリックしたりして、全文を展開するかどうかをユーザーが選択できるようにする方法を使用します。 Web 開発では、jQuery は広く使用されているツールライブラリの 1 つです。以下では、jQuery を使用して、さらにクリックして表示する効果を実現する方法を例を使用して説明します。

まず、jQuery ライブラリを導入する必要があります。これは CDN を通じて導入することも、jQuery ライブラリをローカルにダウンロードしてインポートすることもできます。 CDN メソッドを例にとると、コードは次のとおりです:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ログイン後にコピー

次に、HTML で関連するレイアウトを実行する必要があります。たとえば:

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

ログイン後にコピー

この例では、ページを使用します。タイトルとコンテンツカードのレイアウトが追加され、「もっと見る」と「折りたたむ」という 2 つのリンクが追加されました。

次に、jQuery を使用して、さらにクリックして表示する効果を実現します。具体的なコードは次のとおりです:

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

ログイン後にコピー

上記のコードのロジックは大まかに次のとおりです:

まず、初期状態では「Collapse」リンクを非表示にします。、表示される要素はすでに折り畳まれた状態になっています;
次に、折り畳まれるコンテンツ要素と表示される文字数を取得します;
表示する内容が文字数に満たない場合、折り込み処理は行われません。
それ以外の場合は、文字数を超える内容を非表示にし、最後に「...」記号を追加する必要があります。 ;
ユーザーが「詳細」リンクをクリックしたとき、文字数を超えたコンテンツを非表示にする必要があります。文字数を超えたコンテンツを展開し、「...」記号を非表示にしてください。「詳細」リンク;
ユーザーが「折りたたむ」リンクをクリックすると、文字数を超えたコンテンツを折りたたむ必要があり、「...」記号と「詳細」リンクが表示されます。。

上記のロジックは実際には非常に単純ですが、注意する必要がある点が数多くあります。以下にいくつかの重要なポイントを説明します。

まず、HTML に「.long」クラスの要素を追加して、文字数を超える内容を非表示にします。 CSS では次のように定義できます。

.long {
  white-space: pre-wrap;
}

ログイン後にコピー

ここでは、主に単語が切り詰められるのを防ぐために、空白属性を「pre-wrap」に設定します。ブラウザでは、デフォルトで、空白の属性値は「通常」です。つまり、自動的に行は折り返されず、スペースまたはタブ文字が見つかった場合にのみ改行されます。

2 番目に、HTML に「.ellipsis」クラスの要素を追加して、省略記号「...」を追加しました。 CSS では次のように定義できます。

.ellipsis:before {

  font-weight: bold;
}

ログイン後にコピー

最後に、jQuery イベントをバインドするときに、クリックイベントが使用されることに注意する必要があります。 HTML5 の開発により、モバイル側のタッチイベントはクリックイベントに似ていますが、まったく同じではないため、クリックイベントはモバイル側ではあまり使いやすくなくなりました。さまざまなデバイスやブラウザと互換性を持たせるために、イベントのバインドには jQuery の on メソッドを使用することをお勧めします。実際のニーズに応じてバインドされるイベントを選択できます。

要約すると、jQuery ベースの click-to-show 機能は、Web サイトに優れたユーザーエクスペリエンスを提供し、ユーザーがすべてのコンテンツを展開するかどうかをより自由に選択できるようにします。

以上がjqueryテキストを非表示にするクリックして詳細を表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。