可折叠展开的简单目录实现代码

要实现一个可折叠展开的简单目录，我们通常会使用HTML结合JavaScript（或jQuery）来完成。这里我提供一个基于原生JavaScript的简单示例。这个示例将包括HTML结构、CSS样式和JavaScript功能。

### HTML 结构


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可折叠目录</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="accordion">
  <button class="accordion-button">目录1</button>
  <div class="accordion-panel">
    <p>这是目录1的内容。</p>
  </div>
  <button class="accordion-button">目录2</button>
  <div class="accordion-panel">
    <p>这是目录2的内容。</p>
  </div>
  <!-- 可以继续添加更多目录 -->
</div>

<script src="script.js"></script>
</body>
</html>

### CSS 样式


/* style.css */
.accordion-panel {
  display: none;
  padding: 20px;
  background-color: #f1f1f1;
}

.accordion-button {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
}

.accordion-button:hover, .active {
  background-color: #ddd;
}

### JavaScript 功能


// script.js
document.addEventListener('DOMContentLoaded', function() {
  var buttons = document.querySelectorAll('.accordion-button');

  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      var panel = this.nextElementSibling;
      if (panel.style.display === 'block') {
        panel.style.display = 'none';
      } else {
        var allPanels = document.querySelectorAll('.accordion-panel');
        for (var x = 0; x < allPanels.length; x++) {
          allPanels[x].style.display = 'none';
        }
        panel.style.display = 'block';
      }
    });
  }
});

以上代码创建了一个简单的可折叠目录。当点击一个目录项时，它会展开显示其内容，并收起其他所有已展开的目录项。这是通过JavaScript监听按钮的点击事件，并根据需要修改`display`属性来实现的。CSS用于控制目录项的样式和展开时的布局。