[分享]css做元素的折叠效果

在实际项目中，经常需要实现元素的折叠效果，以达到更好的用户体验。CSS可以很好地实现这种效果，下面将介绍一些在CSS中实现元素折叠的方法。//HTML结构 折叠标题 折叠内容 //CSS样式 .f...

在实际项目中，经常需要实现元素的折叠效果，以达到更好的用户体验。CSS可以很好地实现这种效果，下面将介绍一些在CSS中实现元素折叠的方法。

//HTML结构
<div class="fold">
  <div class="title">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

//CSS样式
.fold {
  border: 1px solid #ccc;
}

.title {
  cursor: pointer;
  background-color: #f0f0f0;
  padding: 10px;
}

.content {
  display: none;
  padding: 10px;
}

.fold.open .content {
  display: block;
} 

上述代码中，我们首先使用CSS设置折叠模块的基本样式，包括边框和背景颜色等。接下来，我们设置标题区域的样式，通过设置鼠标样式为手型以及背景颜色等，作为一个可以被点击的按钮。

接着，我们设置折叠内容的样式，使用"display: none"来实现初始状态下折叠内容不可见。然后，我们使用".fold.open .content"的选择器来表示当前折叠模块被打开的状态下折叠内容的样式。

最后，在Javascript中加入以下代码，实现实现鼠标点击标题时折叠内容的展开与折叠：

var fold = document.querySelectorAll('.fold');

for (var i = 0; i < fold.length; i++) {
  fold[i].addEventListener('click', function() {
    this.classList.toggle('open');
  });
} 

上述代码中，我们使用querySelectorAll获取所有折叠模块，并使用toggle方法在打开和关闭状态之间切换。当点击折叠标题后，我们通过切换".fold.open"样式，从而真正实现了折叠效果。