[分享]css3折叠展开列表

CSS3折叠展开列表是一种非常实用的效果，可以让页面看起来更加清晰和简洁。下面我们来学习一下如何使用CSS3来实现折叠展开列表。 首先，为了使我们的代码更加具有可读性和可维护性，我们可以使用预处理器来...

CSS3折叠展开列表是一种非常实用的效果，可以让页面看起来更加清晰和简洁。下面我们来学习一下如何使用CSS3来实现折叠展开列表。
首先，为了使我们的代码更加具有可读性和可维护性，我们可以使用预处理器来编写CSS。这里我们使用Sass来编写CSS，将其转换为普通的CSS。
在代码中，我们可以使用一个名为“toggle”类的元素来实现折叠展开列表。该元素需要两个子元素，一个是标题元素，一个是内容元素。标题元素用来触发折叠和展开，内容元素则是被折叠和展开的部分。
我们可以使用CSS中的伪类来实现元素的状态切换。当我们点击标题元素时，我们可以使用:checked伪类来修改内容元素的状态样式，从而实现折叠和展开列表的效果。当我们再次点击标题元素时，使用:checked伪类可以再次修改内容元素的状态样式，使其返回原始状态。
下面是示例代码：

@import "compass/css3";
<br>
.toggle {
  position: relative;
  margin-bottom: 1em;
<br>
  > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
<br>
  > label {
    display: block;
    padding: 1em;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    cursor: pointer;
<br>
    &:before {
      content: "+";
      display: inline-block;
      margin-right: 0.5em;
      background-color: #999;
      color: #fff;
      font-size: 0.8em;
      line-height: 1;
      padding: 0.2em;
      text-align: center;
      vertical-align: middle;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }
<br>
    &:hover:before {
      background-color: #666;
    }
  }
<br>
  > input[type="checkbox"] + div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
<br>
  > input[type="checkbox"]:checked + label:before {
    content: "-";
    background-color: #999;
  }
<br>
  > input[type="checkbox"]:checked + div {
    max-height: 1000px;
  }
}

我们使用了Sass来编写CSS，并且使用了Compass库来实现一些常用的CSS3功能，例如显示、隐藏元素和过渡效果。在最后的代码中，我们定义了.toggle元素和它的子元素，通过:checked伪类来实现折叠和展开效果。
通过参考上面的代码，我们可以轻松地实现一个漂亮的折叠展开列表。当我们的页面需要显示大量内容时，这个效果将非常实用。