Javascript는 텍스트 확장 및 축소를 구현합니다.

JavaScript는 텍스트 단락의 확장 및 축소 기능을 구현합니다.

웹 디자인이 사용자 경험에 점점 더 많은 관심을 가지면서 텍스트 단락을 확장하거나 축소해야 하는 페이지 디자인이 점점 더 많아질 것입니다. 이 기능을 구현하는 JavaScript 코드입니다. JavaScript를 사용하여 텍스트를 확장하고 축소하는 방법을 살펴보겠습니다.

1. HTML 코드

먼저 HTML 코드를 준비해야 합니다. 이 코드는 확장 및 축소해야 하는 텍스트와 나머지 페이지 요소일 수 있습니다. 샘플 코드는 다음과 같습니다.

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

이 코드에서는 <div> 태그를 사용하여 확장 및 축소해야 하는 텍스트와 버튼 요소를 래핑합니다. <code><div> 태그에서는 <code><p></p> 태그를 사용하여 확장 및 축소해야 하는 텍스트 콘텐츠를 표시합니다. <button></button> 태그를 사용하여 '더 보기' 버튼을 표시합니다. <div>标签来包裹需要展开收起的文字以及按钮元素。在<code><div>标签中，我们用一个<code><p></p>标签来显示需要展开收起的文字内容，在文字内容的下方，使用一个<button></button>标签来显示“查看更多”的按钮。

2. CSS样式

我们需要使用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代码

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

首先，我们可以创建一个变量来存储当前是否处于展开状态，初始状态为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 = '查看更多';
  }
});

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

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

CSS 스타일<p></p>🎜기본 및 확장 상태에서 확장 및 축소해야 하는 텍스트의 스타일을 설정하려면 CSS를 사용해야 합니다. 🎜rrreee
🎜JavaScript code🎜🎜🎜다음으로 JavaScript 코드를 사용하여 "더 보기" 버튼의 클릭 이벤트를 구현해야 합니다. 그러면 버튼을 클릭할 때 필요한 항목이 확장 또는 축소 Word를 확장하거나 축소할 수 있습니다. 🎜🎜먼저, 현재 확장 상태인지를 저장하는 변수를 만들 수 있습니다. 초기 상태는 false입니다. 즉, 접힌 상태라는 의미입니다. 🎜rrreee🎜사용자가 "더 보기" 버튼을 클릭하면 텍스트를 확장 및 축소해야 하는 <p></p> 요소를 가져와서 를 추가하거나 제거해야 합니다. 이 요소는 확장의 클래스입니다. 동시에 사용자에게 현재 텍스트 상태를 상기시키기 위해 버튼의 텍스트 내용을 "간단히" 또는 "자세히 보기"로 변경합니다. 🎜rrreee🎜이 코드에서는 먼저 document.querySelector() 메서드를 사용하여 확장 및 축소해야 하는 텍스트에 해당하는 <p></p> 요소를 가져옵니다. 및 "추가" 버튼에 해당하는 <button></button> 요소를 봅니다. 그런 다음 사용자가 버튼을 클릭할 때 실행되는 클릭 이벤트 리스너를 버튼 요소에 추가합니다. 🎜🎜이벤트 리스너에서는 isExpanded 변수의 상태를 사용하여 현재 텍스트가 확장되었는지 축소되었는지 확인합니다. 확장된 상태인 경우 <p></p> 요소에 is-expanded 클래스를 추가하고 버튼의 텍스트를 "Collapse"로 설정합니다. 대신 is-expanded 클래스를 제거하고 버튼의 텍스트를 "자세히 보기"로 설정하겠습니다. 🎜🎜지금까지 우리는 텍스트의 확장 및 축소 기능을 성공적으로 구현했습니다. 사용자가 '더 보기' 버튼을 클릭하면 펼치거나 접고 싶은 텍스트를 펼치거나 접을 수 있어 페이지가 더욱 간결해지고 읽기 쉬워집니다. 🎜