jquery zum Erweitern klicken, Textersetzung einklappen-Front-End-Fragen und Antworten-php.cn

jquery zum Erweitern klicken, Textersetzung einklappen

PHPz

Freigeben： 2023-05-18 14:59:39

Original

637 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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();
  }
});

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!