css 左侧二级分组折叠面板代码

以下是一个简单的 CSS 左侧二级分组折叠面板代码：

HTML 部分：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Group 1</div>
    <div class="accordion-content">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Group 2</div>
    <div class="accordion-content">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</div>

CSS 部分：

.accordion {
  width: 200px;
}

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  cursor: pointer;
  padding: 10px;
  background-color: #eee;
}

.accordion-content {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
}

.accordion-item.active .accordion-content {
  display: block;
}

JavaScript 部分：

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    var accordionItem = this.parentElement;
    accordionItem.classList.toggle('active');
  });
});

此代码实现了一个带有两个折叠组的简单左侧面板，每个组都有一个折叠头和一个折叠内容部分。默认情况下，折叠内容部分是隐藏的。当单击折叠头时，相应的折叠组将切换到 active 类，该类将显示折叠内容部分。