折叠引导程序 4 - HTML

本文将向您介绍如何实现一个简单的折叠引导程序，基于HTML和JavaScript开发。

折叠菜单的实现

1. 首先，在HTML中创建一个折叠菜单的基本结构，如下所示：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <span>折叠菜单标题1</span>
      <i class="fa fa-caret-up"></i>
    </div>
    <div class="accordion-body">
      折叠菜单内容1
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <span>折叠菜单标题2</span>
      <i class="fa fa-caret-up"></i>
    </div>
    <div class="accordion-body">
      折叠菜单内容2
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <span>折叠菜单标题3</span>
      <i class="fa fa-caret-up"></i>
    </div>
    <div class="accordion-body">
      折叠菜单内容3
    </div>
  </div>
</div>

这里我们使用了FontAwesome图标库中的“fa-caret-up”图标作为折叠菜单的指示器。当菜单处于展开状态时，图标被旋转180度；否则，图标保持原样。这是通过CSS实现的。

2. 然后，使用JavaScript代码来控制折叠菜单的展开与折叠，如下所示：

<script>
  var acc = document.getElementsByClassName("accordion-header");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
        this.querySelector('.fa').classList.toggle("fa-caret-down");
        this.querySelector('.fa').classList.toggle("fa-caret-up");
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
        this.querySelector('.fa').classList.toggle("fa-caret-down");
        this.querySelector('.fa').classList.toggle("fa-caret-up");
      } 
    });
  }
</script>

在这里，我们使用了JavaScript的事件监听器来捕获标题的点击事件，响应的函数将根据菜单的展开状态来展开或折叠内容区域，并且相应地更改指示器的样式。

折叠菜单的样式设计

1. 定义基本的样式：

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
}
.accordion-header {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}
.accordion-header i {
  position: absolute;
  right: 10px;
  top: 10px;
  transition: transform 0.3s;
}
.accordion-body {
  padding: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

这将为折叠菜单的标题，内容区域和指示器定义基本的样式。

2. 然后，我们为标题的点击事件添加样式：

.accordion-header.active {
  background-color: #ddd;
}
.accordion-header.active i {
  transform: rotate(180deg);
}

这将使标题在点击时更改其背景颜色，并旋转指示器，以反映菜单是否处于展开状态。

3. 最后，我们为折叠菜单的整体样式添加样式：

.accordion {
  width: 100%;
}

这将确保折叠菜单可以适应其包含元素的宽度。

以上就是一个简单的折叠引导程序的完整实现。您可以根据需要调整样式和布局，以适应您的特定应用程序场景。