HTML 手风琴式目录结构控件：代码示例及自定义样式

.accordion { width: 100%; max-width: 600px; margin: 0 auto; }

.accordion-header { background-color: #f2f2f2; color: #333; padding: 10px; cursor: pointer; font-weight: bold; border: 1px solid #ccc; }

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

.accordion-panel { display: none; padding: 10px; border: 1px solid #ccc; }

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

accordionHeaders.forEach(function(header) { header.addEventListener('click', function() { // toggle active class on header this.classList.toggle('active');

// toggle display of panel
var panel = this.nextElementSibling;
if (panel.style.display === 'block') {
  panel.style.display = 'none';
} else {
  panel.style.display = 'block';
}

}); });

这个控件可以通过点击每个部分的标题来展开或收起它的内容，同时也可根据需要进行自定义样式的修改。