css collapse 水平

CSS Collapse 可以用于折叠元素，让页面更加美观、简洁。如果要实现水平折叠，可以使用 CSS 的 transform 属性和 transition 属性。以下是一个简单的示例：

HTML 代码：

<div class="collapse">
  <p>这是要折叠的内容</p>
</div>
<button class="collapse-btn">点击折叠</button>

CSS 代码：

.collapse {
  width: 100%;
  overflow: hidden;
  transition: height 0.3s ease-out;
  height: auto;
}
.collapse.closed {
  height: 0;
}
.collapse p {
  margin: 0;
  padding: 10px;
  background-color: #f2f2f2;
}

.collapse-btn {
  display: block;
  margin: 10px 0;
  padding: 5px 10px;
  background-color: #ccc;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

JavaScript 代码：

var collapse = document.querySelector('.collapse');
var btn = document.querySelector('.collapse-btn');

btn.addEventListener('click', function() {
  collapse.classList.toggle('closed');
});

以上代码中，我们首先定义了一个具有自适应高度的 `.collapse` 容器，然后定义了一个 `.closed` 类，用于折叠容器。当 `.closed` 类被添加时，容器的高度变为 0，从而实现折叠效果。最后，我们使用 JavaScript 监听按钮点击事件，通过切换 `.closed` 类来实现折叠和展开效果。