Heim > Artikel > Web-Frontend > jquery zum Erweitern klicken, Textersetzung einklappen

jquery zum Erweitern klicken, Textersetzung einklappen

PHPzOriginal: 2023-05-18 14:59:39562Durchsuche

jQuery Klicken Sie hier, um die Textersetzung zu erweitern/zu reduzieren

Im Webdesign müssen wir häufig die Funktion zum Erweitern/Reduzieren verwenden, z. B. zum Erweitern von Listen, Optionen für Dropdown-Felder, Artikeldetails usw . Es ist relativ einfach, diese Funktion mit jQuery zu implementieren. Schauen wir uns die spezifische Implementierungsmethode an.

HTML-Struktur

Hier nehmen wir eine Listenerweiterung als Beispiel. Die HTML-Struktur sieht folgendermaßen aus: #🎜 🎜#

<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>

Jedes Listenelement enthält einen Titel und Inhalt. Standardmäßig zeigen wir nur den Titel an und der Inhaltsteil muss zum Erweitern angeklickt werden.

Als nächstes legen wir den CSS-Stil des Titels und des Inhalts fest, damit diese normal angezeigt und unterschieden werden können: #🎜 🎜#

.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;
}

Hier müssen wir den Stil des Titels auf eine Handform einstellen, um anzuzeigen, dass er zum Erweitern angeklickt werden kann. Der Inhaltsteil ist standardmäßig ausgeblendet, daher muss das Anzeigeattribut auf „Keine“ gesetzt werden.

jQuery-Skript

Der nächste Schritt ist der Schlüsselteil. Wir müssen jQuery verwenden, um die Funktion zum Klicken auf den Titel zum Erweitern zu implementieren /Zusammenbruch. Die spezifische Implementierungsmethode kann in die folgenden Schritte unterteilt werden:

Hinzufügen eines Klickereignis-Listeners: Fügen Sie jedem Titel einen Klickereignis-Listener hinzu und lösen Sie das Ereignis aus, wenn der Benutzer klickt.

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

Suchen Sie den entsprechenden Inhaltsteil: Suchen Sie den entsprechenden Inhaltsteil über die jQuery-Auswahl und zeigen Sie ihn dann an oder blenden Sie ihn aus.

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

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

Ändern Sie den Titeltext: Ändern Sie je nach Anzeigestatus des Inhalts den Titeltext und ersetzen Sie „erweitern“ durch „reduzieren“.

$('.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('展开', '收起'));
  }
});

<!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>

Oben wird beschrieben, wie Sie mit jQuery die Funktion zum Erweitern/Reduzieren per Klick implementieren und gleichzeitig den Titeltext ändern. Anhand dieses einfachen Beispiels können wir feststellen, dass die Verwendung von jQuery uns dabei helfen kann, einige gängige Seiteninteraktionseffekte schneller abzuschließen und gleichzeitig die Benutzererfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonjquery zum Erweitern klicken, Textersetzung einklappen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：nodejs-Klammer-EscapeNächster Artikel：nodejs-Klammer-Escape

In Verbindung stehende Artikel

Mehr sehen