html 点击展开更多和收起

展开和收起功能的实现通常使用 JavaScript 和 CSS 来完成。以下是一个简单的例子：

HTML 代码：

<div class="content">
  <p>这是一段默认显示的文本。</p>
  <p class="more-text">这是一段需要点击“展开”才能看到的文本。</p>
  <a href="#" class="more-link">展开</a>
</div>

CSS 代码：

.content .more-text {
  display: none;
}

.content .more-link {
  display: block;
}

.content .more-link.collapsed:after {
  content: " 展开";
}

.content .more-link.expanded:after {
  content: " 收起";
}

.content .more-link:after {
  content: ">";
}

JavaScript 代码：

const moreText = document.querySelector('.more-text');
const moreLink = document.querySelector('.more-link');

let isExpanded = false;

moreLink.addEventListener('click', function(event) {
  event.preventDefault();
  if (!isExpanded) {
    moreText.style.display = 'block';
    moreLink.classList.remove('collapsed');
    moreLink.classList.add('expanded');
    isExpanded = true;
  } else {
    moreText.style.display = 'none';
    moreLink.classList.remove('expanded');
    moreLink.classList.add('collapsed');
    isExpanded = false;
  }
});

这段代码中，我们首先定义了一个需要展开的文本块和一个用来触发展开和收起的链接。然后，我们在 CSS 中设置了默认情况下展开的文本块隐藏，展开链接显示为“展开”，并添加了箭头图标。最后，在 JavaScript 中，我们给展开链接添加了一个点击事件监听器，当点击链接时，根据当前状态展开或收起文本块，并在展开链接上切换类，以改变箭头方向和文字。