html中垂直伸缩列表代码

HTML中的垂直伸缩列表是一个非常实用的组件，它可以帮助我们在网页中快速展示一系列有序的内容。在HTML中创建垂直伸缩列表是非常简单的，只需要使用一些简单的代码就可以完成。 下面是一个简单的垂直伸缩列表的代码示例：

<ul class="accordion">
  <li>
    <a class="toggle">标题1</a>
    <div class="content">内容1</div>
  </li>
  <li>
    <a class="toggle">标题2</a>
    <div class="content">内容2</div>
  </li>
  <li>
    <a class="toggle">标题3</a>
    <div class="content">内容3</div>
  </li>
</ul>

在这个示例中，我们首先定义了一个ul元素，并为它设置了一个class为accordion。接着，我们在列表中定义了三个li元素，每个li元素分别包含一个a元素和一个div元素。a元素用于显示标题，div元素中则包含了对应的内容。 为了实现垂直伸缩效果，我们需要使用CSS来设置一些样式。下面是一个简单的CSS代码示例：

.accordion li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion a {
  display: block;
  padding: 10px;
  background: #f1f1f1;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

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

.accordion .content {
  display: none;
  padding: 20px;
}

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

在这个CSS代码示例中，我们首先对li元素进行了一些重置样式的设定，然后对a元素进行了一些通用样式的定义。其中，padding、background、color、border等属性都可以根据实际需求进行调整。 接着，我们定义了一个a.active的样式，在默认情况下这个样式是不生效的，只有在a元素被点击时才会生效。最后，我们定义了一个.content的样式，并将它的display属性设置为none，只有在对应的li元素被点击时才会被显示出来。 通过上述代码，我们就实现了一个简单的垂直伸缩列表。需要注意的是，这个示例中只是一个最基本的代码，实际应用中还需要根据具体需求进行不断地优化和调整。