[分享]css3手机端手风琴

CSS3手机端手风琴是一种非常实用的页面布局方式。手风琴通常用于展示列表，可以让用户在有限的空间内快速浏览大量内容。CSS3手风琴最基本的实现方式是利用无序列表演示，通过CSS处置每个列表项的宽度并将...

CSS3手机端手风琴是一种非常实用的页面布局方式。手风琴通常用于展示列表，可以让用户在有限的空间内快速浏览大量内容。

CSS3手风琴最基本的实现方式是利用无序列表演示，通过CSS处置每个列表项的宽度并将其保持在一整行上展示。当用户选择一个列表项时，其他项会折叠起来，而用户选择的那个则会展开，显示更多的信息。

<ul class="accordion">
  <li>
    <h3>列表项1</h3>
    <div>全部内容1</div>
  </li>
  <li>
    <h3>列表项2</h3>
    <div>全部内容2</div>
  </li>
  <li>
    <h3>列表项3</h3>
    <div>全部内容3</div>
  </li>
</ul> 

对于每个列表项，可以编写CSS规则来使其折叠或展开。我们可以使用“:checked”伪类来监听当前选择的项目，并使用“~”符号来控制其他项目的可见性。

.accordion li {
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.accordion input[type="checkbox"] {
  display: none;
}
.accordion label {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 30px;
  cursor: pointer;
  color: #333;
}
.accordion label:before {
  content: "+";
  position: absolute;
  right: 15px;
  transition: all 0.3s ease;
}
.accordion label:hover:before {
  color: #ff5733;
  transform: rotate(90deg);
}
.accordion input[type="checkbox"]:checked ~ div {
  max-height: calc(100vh - 160px);
}
.accordion div {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0 30px;
  line-height: 24px;
  background: #f9f9f9;
  font-size: 14px;
  color: #666;
} 

通过这个实例，可以看出CSS手风琴在实现细节上非常灵活，可以根据具体的需求灵活调整。并且在手机端上的UI展示效果非常出色，是一种很好的解决方案。