Javascript implementiert die Erweiterung und Reduzierung eines Textabschnitts

<p>JavaScript implementiert die Funktion zum Erweitern und Reduzieren eines Textabsatzes.

<p>Da das Webdesign immer mehr auf die Benutzererfahrung achtet, müssen immer mehr Seitendesigns einen Textabsatz erweitern oder reduzieren JavaScript-Code zur Implementierung dieser Funktion. Sehen wir uns an, wie Sie mit JavaScript einen Text erweitern und reduzieren.

1. HTML-Code

<p>Zuerst müssen wir einen Teil des HTML-Codes vorbereiten. Dieser Code kann der Text sein, der erweitert und reduziert werden muss, sowie die restlichen Seitenelemente. Der Beispielcode lautet wie folgt:

<div class="content">
  <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p>
  <button class="btn-more">查看更多</button>
</div>

<p>In diesem Code verwenden wir ein <div>-Tag, um die Text- und Schaltflächenelemente zu umschließen, die erweitert und reduziert werden müssen. Im <div>-Tag verwenden wir ein <p>-Tag, um den Textinhalt anzuzeigen, der erweitert und reduziert werden muss. Unter dem Textinhalt verwenden wir a <button>-Tag, um die Schaltfläche „Mehr anzeigen“ anzuzeigen. <div>标签来包裹需要展开收起的文字以及按钮元素。在<div>标签中，我们用一个<p>标签来显示需要展开收起的文字内容，在文字内容的下方，使用一个<button>标签来显示“查看更多”的按钮。

2. CSS样式

<p>我们需要使用CSS来设置需要展开收起的文字在默认情况和展开状态下的样式。

.content p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 设置文字溢出时显示省略号 */
}

.content p.is-expanded {
  overflow: visible;
  white-space: normal;
  /* 文字溢出时不再显示省略号 */
}

.btn-more {
  display: block;
  margin-top: 10px;
  cursor: pointer;
  /* 设置鼠标指针为手型 */
}

3. JavaScript代码

<p>接下来，我们需要使用JavaScript代码来实现“查看更多”按钮的点击事件，使得点击按钮时可以展开或者收起需要展开收起的文字。

<p>首先，我们可以创建一个变量来存储当前是否处于展开状态，初始状态为false，即处于折叠状态。

let isExpanded = false;

<p>当用户点击“查看更多”按钮时，我们需要获取需要展开收起的文字的<p>元素，并为这个元素添加或移除一个is-expanded的class。同时，更改按钮的文本内容，显示“更少”或“查看更多”，以提示用户当前的文字状态。

const content = document.querySelector('.content');
const btnMore = document.querySelector('.btn-more');

btnMore.addEventListener('click', function() {
  const paragraph = content.querySelector('p');
  isExpanded = !isExpanded;
  
  if (isExpanded) {
    paragraph.classList.add('is-expanded');
    btnMore.innerText = '收起';
  } else {
    paragraph.classList.remove('is-expanded');
    btnMore.innerText = '查看更多';
  }
});

<p>在这段代码中，我们首先使用document.querySelector()方法获取到需要展开收起的文字对应的<p>元素和“查看更多”按钮对应的<button>元素。然后，给按钮元素添加一个点击事件监听器，当用户点击按钮时会触发这个事件。

<p>在事件监听器中，我们会通过isExpanded变量的状态来判断当前文字处于展开状态还是折叠状态。如果是展开状态，我们会给<p>元素添加一个is-expanded的class，并将按钮的文本设置为“收起”。反之，我们会移除is-expanded

CSS-Stil<p>
🎜Wir müssen CSS verwenden, um den Stil des Texts festzulegen, der im Standard- und erweiterten Zustand erweitert und reduziert werden muss. 🎜rrreee
🎜JavaScript-Code🎜🎜🎜Als nächstes müssen wir JavaScript-Code verwenden, um das Klickereignis der Schaltfläche „Mehr anzeigen“ zu implementieren, damit beim Klicken auf die Schaltfläche die benötigten Elemente angezeigt werden Word kann erweitert oder reduziert werden. 🎜🎜Zuerst können wir eine Variable erstellen, um zu speichern, ob sie sich derzeit im erweiterten Zustand befindet. Der Anfangszustand ist falsch, was bedeutet, dass sie sich im reduzierten Zustand befindet. 🎜rrreee🎜Wenn der Benutzer auf die Schaltfläche „Mehr anzeigen“ klickt, müssen wir das <p>-Element abrufen, das den Text erweitern und reduzieren muss, und ein ist für hinzufügen oder entfernen die Klasse dieses Elements -expanded. Ändern Sie gleichzeitig den Textinhalt der Schaltfläche, um „Weniger“ oder „Mehr anzeigen“ anzuzeigen, um den Benutzer an den aktuellen Textstatus zu erinnern. 🎜rrreee🎜In diesem Code verwenden wir zunächst die Methode document.querySelector(), um das <p>-Element abzurufen, das dem Text entspricht, der erweitert und reduziert werden muss und das Element „View The <button>“, das der Schaltfläche „Mehr“ entspricht. Fügen Sie dann dem Schaltflächenelement einen Klickereignis-Listener hinzu, der ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt. 🎜🎜Im Ereignis-Listener verwenden wir den Status der Variablen isExpanded, um zu bestimmen, ob der aktuelle Text erweitert oder reduziert ist. Wenn es sich im erweiterten Zustand befindet, fügen wir dem Element <p> eine Klasse is-expanded hinzu und setzen den Text der Schaltfläche auf „Collapse“. Stattdessen entfernen wir die Klasse is-expanded und setzen den Text der Schaltfläche auf „Mehr anzeigen“. 🎜🎜Bisher haben wir die Funktion zum Erweitern und Reduzieren eines Textabschnitts erfolgreich implementiert. Wenn der Benutzer auf die Schaltfläche „Mehr anzeigen“ klickt, kann der Text, der erweitert oder reduziert werden muss, erweitert oder reduziert werden, wodurch die Seite prägnanter und leichter lesbar wird. 🎜

Das obige ist der detaillierte Inhalt vonJavascript implementiert die Erweiterung und Reduzierung eines Textabschnitts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!