JQuery-Text ausblenden Klicken Sie hier, um mehr anzuzeigen

Mit der Entwicklung der Internettechnologie hat das Benutzererlebnis von Websites immer mehr Aufmerksamkeit erhalten. Beim Website-Design ist die Frage, wie Inhalte besser dargestellt und das Leseerlebnis der Benutzer verbessert werden können, zu einem wichtigen Thema geworden.

Um zu vermeiden, dass die Seite zu lang wird, verwenden wir bei längeren Seiteninhalten normalerweise die Textfaltung oder klicken auf „Mehr“, sodass Benutzer wählen können, ob sie den gesamten Text erweitern möchten. In der Webentwicklung ist jQuery eine der am weitesten verbreiteten Werkzeugbibliotheken. Im Folgenden zeigen wir anhand eines Beispiels, wie Sie mit jQuery den Effekt erzielen, mehr zum Anzeigen anzuklicken.

Zuerst müssen wir die jQuery-Bibliothek vorstellen, die über CDN eingeführt werden kann, oder Sie können die jQuery-Bibliothek lokal herunterladen und importieren. Am Beispiel der CDN-Methode lautet der Code wie folgt:

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

Als nächstes müssen wir ein relevantes Layout in HTML ausführen, zum Beispiel:

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

In diesem Beispiel verwenden wir ein Kartenlayout mit Titel und Inhalt und fügen hinzu zwei Links, nämlich „Mehr“ und „Reduzieren“.

Als nächstes können wir jQuery verwenden, um den Effekt zu erzielen, dass durch Klicken mehr angezeigt wird. Der spezifische Code lautet wie folgt:

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

Die Logik des obigen Codes lautet ungefähr wie folgt:

1. Zunächst blenden wir den Link „Reduzieren“ aus, da sich das anzuzeigende Element im Ausgangszustand bereits im reduzierten Zustand befindet Zustand;
2. Dann erhalten wir das zu reduzierende Inhaltselement und die Anzahl der anzuzeigenden Zeichen.
3. Wenn die Länge des anzuzeigenden Inhalts kleiner als die Anzahl der Zeichen ist, wird der Faltvorgang nicht durchgeführt ;
4. Andernfalls müssen wir den Inhalt, der die Anzahl der Zeichen überschreitet, ausblenden und am Ende das Symbol „…“ hinzufügen.
5. Wenn der Benutzer auf den Link „Mehr“ klickt, müssen wir den Inhalt erweitern
6. Wenn der Benutzer auf den Link „Reduzieren“ klickt, müssen wir den Inhalt, der die Anzahl der Zeichen überschreitet, ausblenden und anzeigen Symbol „…“ und der Link „Mehr“.

Die obige Logik ist eigentlich sehr einfach, aber es gibt viele Punkte, die beachtet werden müssen. Im Folgenden erläutern wir einige der wichtigsten Punkte.

Zuerst fügen wir ein Element mit der Klasse „.long“ in HTML hinzu, um Inhalte auszublenden, die die Anzahl der Zeichen überschreiten. Es kann in CSS wie folgt definiert werden:

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

Hier setzen wir sein Leerraumattribut auf „pre-wrap“, hauptsächlich um zu verhindern, dass Wörter abgeschnitten werden. Im Browser ist der Wert des Leerraumattributs standardmäßig „normal“, d.

Zweitens haben wir im HTML ein Element mit der Klasse „.ellipsis“ hinzugefügt, um die Auslassungspunkte „…“ hinzuzufügen. Es kann in CSS wie folgt definiert werden:

.ellipsis:before {

  font-weight: bold;
}

Abschließend müssen wir beachten, dass beim Binden von jQuery-Ereignissen das Klickereignis verwendet wird. Mit der Entwicklung von HTML5 ist das Klickereignis auf der mobilen Seite nicht sehr benutzerfreundlich, da das Berührungsereignis auf der mobilen Seite dem Klickereignis ähnelt, aber nicht genau dasselbe ist. Um mit verschiedenen Geräten und Browsern kompatibel zu sein, wird empfohlen, die on-Methode von jQuery zum Binden von Ereignissen zu verwenden. Sie können die gebundenen Ereignisse entsprechend den tatsächlichen Anforderungen auswählen.

Zusammenfassend lässt sich sagen, dass die jQuery-basierte Click-to-Show-Funktion eine gute Benutzererfahrung für unsere Website bieten kann, sodass Benutzer freier entscheiden können, ob sie alle Inhalte erweitern möchten.

Das obige ist der detaillierte Inhalt vonJQuery-Text ausblenden Klicken Sie hier, um mehr anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!