html制作4级手风琴，点击打开关闭

好的，下面是一个示例代码，可以实现一个四级手风琴，点击打开关闭：

HTML:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">一级菜单</div>
    <div class="accordion-content">
      <div class="accordion">
        <div class="accordion-item">
          <div class="accordion-header">二级菜单</div>
          <div class="accordion-content">
            <div class="accordion">
              <div class="accordion-item">
                <div class="accordion-header">三级菜单</div>
                <div class="accordion-content">
                  <div class="accordion">
                    <div class="accordion-item">
                      <div class="accordion-header">四级菜单</div>
                      <div class="accordion-content">
                        <p>这是四级菜单内容</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">一级菜单</div>
    <div class="accordion-content">
      <p>这是一级菜单内容</p>
    </div>
  </div>
</div>

CSS:

.accordion {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.accordion-item {
  border-top: 1px solid #ccc;
}

.accordion-header {
  background-color: #f1f1f1;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
}

.accordion-header:hover {
  background-color: #ddd;
}

.accordion-header.active {
  background-color: #ccc;
}

.accordion-content {
  display: none;
  padding: 10px;
}

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

JavaScript:

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

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

上面的代码实现了一个四级手风琴，点击菜单项可以打开或关闭对应的内容。需要注意的是，JavaScript 代码使用了事件监听器和 DOM 操作来实现该效果。