如何只使用CSS创建折叠标题效果的示例代码

创建折叠标题效果需要使用CSS的伪类和伪元素、复选框和CSS中的transition属性。下面是具体步骤：

1. HTML结构

首先，我们需要一个具有明显导航结构的HTML菜单。例如：

<ul class="nav-menu">
  <li>
    <input type="checkbox" id="nav-submenu-1">
    <label for="nav-submenu-1">菜单1</label>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="nav-submenu-2">
    <label for="nav-submenu-2">菜单2</label>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
</ul>

其中，每个二级菜单都有一个复选框和一个label标签。ul和li标签是用来创建菜单结构的。每个标签都有一个独立的id，以便CSS能够针对其进行操作。

2. CSS样式

接下来是CSS样式。我们需要使用伪类和伪元素来创建折叠效果。以下是样式的示例代码：

/* 隐藏checkbox */
.nav-menu input {
  display: none;
}

/* 二级菜单前添加图标 */
.nav-menu label::before {
  content: "\25b6";
  margin-right: 10px;
}

/* 处理checkbox选中状态的伪类 */
.nav-menu input:checked + label:before {
  content: "\25bc";
}

/* 二级菜单初始的样式 */
.nav-menu ul {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* checkbox选中时，二级菜单的样式 */
.nav-menu input:checked + label + ul {
  height: auto;
}

最后，我们使用CSS中的transition属性来创建平滑的折叠效果。当checkbox选中时，二级菜单的高度会从0变为auto，实现菜单的展开。当checkbox不选中时，二级菜单重新隐藏起来。

示例说明

示例一：折叠效果的单个菜单

<ul>
  <li>
    <input type="checkbox" id="menu">
    <label for="menu">折叠菜单</label>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
</ul>

在这个示例中，我们只创建了一个折叠菜单。在CSS中，我们仅需要添加相应的样式即可。这个例子可以在单页面上使用。

示例二：复杂的多层级折叠效果

<ul>
  <li>
    <input type="checkbox" id="menu-1">
    <label for="menu-1">一级菜单1</label>
    <ul>
      <li>
        <input type="checkbox" id="menu-1-1">
        <label for="menu-1-1">二级菜单1</label>
        <ul>
          <li><a href="#">子菜单1</a></li>
          <li><a href="#">子菜单2</a></li>
          <li><a href="#">子菜单3</a></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="menu-1-2">
        <label for="menu-1-2">二级菜单2</label>
        <ul>
          <li><a href="#">子菜单1</a></li>
          <li><a href="#">子菜单2</a></li>
          <li><a href="#">子菜单3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" id="menu-2">
    <label for="menu-2">一级菜单2</label>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
</ul>

在这个示例中，我们创建了多个嵌套的折叠菜单。根据HTML结构，我们需要使用更多的CSS代码来处理！

以上两个示例展示了如何只使用CSS来创建折叠效果。如果你了解CSS的基础知识，上述代码就足以让你理解以及动手尝试。