html 点击展开更多和收起

展开和收起功能可以使用 HTML、CSS 和 JavaScript 来实现。一种常见的实现方法是使用 CSS 中的 `display` 属性和 JavaScript 中的事件监听器。

首先，将要展开和收起的内容放在一个元素中，例如一个 `<div>` 标签。给这个元素设置一个固定高度，并使用 CSS 的 `overflow` 属性设置为 `hidden`，这样就能隐藏超出固定高度的内容。

然后，在页面上添加一个展开/收起按钮，可以使用一个 `<button>` 或 `<a>` 标签。当点击这个按钮时，使用 JavaScript 监听器来切换被隐藏内容的 `display` 属性。如果当前内容被隐藏，那么将 `display` 属性设置为 `block`，否则设置为 `none`。

下面是一个示例代码：

<div class="expandable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in purus vel sapien tincidunt commodo.</p>
  <p>Ut auctor, libero in eleifend mattis, lectus sapien laoreet ipsum, id bibendum elit dui et ante.</p>
  <p>Nullam sed nisl vitae justo condimentum bibendum eu at mauris. Donec consectetur eros eu commodo ultricies.</p>
  <button class="expand-btn">展开更多</button>
</div>

<style>
.expandable {
  height: 100px;
  overflow: hidden;
}
</style>

<script>
const expandBtn = document.querySelector('.expand-btn');
const expandable = document.querySelector('.expandable');

expandBtn.addEventListener('click', () => {
  if (expandable.style.display === 'none') {
    expandable.style.display = 'block';
    expandBtn.textContent = '收起';
  } else {
    expandable.style.display = 'none';
    expandBtn.textContent = '展开更多';
  }
});
</script>

在这个示例中，`.expandable` 元素有一个固定高度和 `overflow: hidden` 属性，按钮的文本根据被隐藏内容的状态进行更改。点击按钮时，JavaScript 代码会检查内容的状态并相应地更改 `display` 属性和按钮文本。