jqueryクリックして展開折りたたむテキストの置換-フロントエンドQ&A-php.cn

jqueryクリックして展開折りたたむテキストの置換

PHPz

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

オリジナル

635 人が閲覧しました

jQuery クリックしてテキストを展開/折りたたみます。

Web デザインでは、リストの展開、ドロップダウンボックスのオプション、記事の詳細など、展開/折りたたみ機能を使用する必要がよくあります。この機能はjQueryを使えば比較的簡単に実装できるので、具体的な実装方法を見てみましょう。

HTML 構造

最初に HTML 構造を構築しましょう。ここでは例としてリスト展開を取り上げます。HTML 構造は次のようになります:

<ul class="list">
  <li>
    <h3>标题1</h3>
    <div class="content">内容1</div>
  </li>
  <li>
    <h3>标题2</h3>
    <div class="content">内容2</div>
  </li>
  <li>
    <h3>标题3</h3>
    <div class="content">内容3</div>
  </li>
</ul>

ログイン後にコピー

where , 各リスト項目にはタイトルとコンテンツが含まれています。デフォルトではタイトルのみが表示され、コンテンツ部分をクリックして展開する必要があります。

CSS スタイル

次に、タイトルとコンテンツが通常どおりに表示され、区別できるように、CSS スタイルを設定します。

.list li {
  margin-bottom: 10px;
}

.list li h3 {
  color: #333;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 5px;
}

.list li .content {
  display: none;
  margin-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}

ログイン後にコピー

Hereタイトルのスタイルを手の形に設定して、クリックして展開できることを示す必要があります。コンテンツ部分はデフォルトで非表示になっているため、表示属性を none に設定する必要があります。

jQuery スクリプト

次のステップは重要な部分です。jQuery を使用して、タイトルをクリックして展開/縮小する機能を実現する必要があります。具体的な実装方法は次の手順に分けることができます。

クリックイベントリスナーの追加: 各タイトルにクリックイベントリスナーを追加し、ユーザーがクリックしたときにイベントをトリガーします。

$('.list li h3').click(function() {
  // to do
});

ログイン後にコピー

対応するコンテンツパーツを検索する: jQuery のセレクターを通じて対応するコンテンツパーツを検索し、それを表示または非表示にします。

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
  } else {
    content.show();
  }
});

ログイン後にコピー

タイトルテキストの変更: コンテンツの表示状況に応じて、タイトルテキストを変更し、「展開」を「縮小」に置き換えます。

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
    $(this).text($(this).text().replace('收起', '展开'));
  } else {
    content.show();
    $(this).text($(this).text().replace('展开', '收起'));
  }
});

ログイン後にコピー

この時点で、単純な jQuery のクリックによる展開/折りたたみ関数が完成しました。完全なコードについては、次の例を参照してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 点击展开/收起文字替换</title>
  <style>
    .list li {
      margin-bottom: 10px;
    }

    .list li h3 {
      color: #333;
      cursor: pointer;
      font-size: 16px;
      margin-bottom: 5px;
    }

    .list li .content {
      display: none;
      margin-left: 20px;
      font-size: 14px;
      line-height: 1.5;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('.list li h3').click(function() {
        var content = $(this).siblings('.content');

        if (content.is(':visible')) {
          content.hide();
          $(this).text($(this).text().replace('收起', '展开'));
        } else {
          content.show();
          $(this).text($(this).text().replace('展开', '收起'));
        }
      });
    });
  </script>
</head>
<body>
  <ul class="list">
    <li>
      <h3>标题1</h3>
      <div class="content">内容1</div>
    </li>
    <li>
      <h3>标题2</h3>
      <div class="content">内容2</div>
    </li>
    <li>
      <h3>标题3</h3>
      <div class="content">内容3</div>
    </li>
  </ul>
</body>
</html>

ログイン後にコピー

上記は、jQuery を使用してクリック展開/折りたたみ機能を実装し、同時にタイトルテキストを変更する実装方法です。この簡単な例を通して、jQuery を使用すると、いくつかの一般的なページインタラクション効果をより迅速に完了できると同時に、ユーザーエクスペリエンスも向上することがわかります。

以上がjqueryクリックして展開折りたたむテキストの置換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。