用web前端制作水平折叠栏

水平折叠栏可以通过 CSS 和 JavaScript 实现。以下是一个简单的示例：

HTML:

<div class="accordion">
  <button class="accordion__button">Section 1</button>
  <div class="accordion__content">
    <p>Content for section 1 goes here.</p>
  </div>
  <button class="accordion__button">Section 2</button>
  <div class="accordion__content">
    <p>Content for section 2 goes here.</p>
  </div>
  <button class="accordion__button">Section 3</button>
  <div class="accordion__content">
    <p>Content for section 3 goes here.</p>
  </div>
</div>

CSS:

.accordion {
  display: flex;
  flex-wrap: wrap;
}

.accordion__button {
  flex: 1 1 100%;
  background-color: #eee;
  border: none;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion__button:hover {
  background-color: #ccc;
}

.accordion__content {
  display: none;
  flex: 1 1 100%;
  padding: 10px;
  background-color: #f9f9f9;
}

JavaScript:

var buttons = document.querySelectorAll('.accordion__button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.toggle('active');
    var content = this.nextElementSibling;
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
}

这段代码会创建一个水平折叠栏，每个部分包含一个标题和一个内容区域。当用户点击标题时，内容区域会展开或折叠。