[分享]css中左右手风琴效果

CSS中的左右手风琴效果是一种常见的页面展示效果，它可以使页面在有限的空间内展示出多个内容块，使用户可以方便地切换不同的内容块。接下来，我们将详细介绍该效果的实现方法。/ HTML结构 / 标题1...

CSS中的左右手风琴效果是一种常见的页面展示效果，它可以使页面在有限的空间内展示出多个内容块，使用户可以方便地切换不同的内容块。接下来，我们将详细介绍该效果的实现方法。

/* HTML结构 */
<div class="accordion-wrap">
  <div class="item">
    <div class="title">标题1</div>
    <div class="content">内容1</div>
  </div>
  <div class="item">
    <div class="title">标题2</div>
    <div class="content">内容2</div>
  </div>
  /* 更多的item块 */
</div>

/* CSS样式 */
.accordion-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.item {
  flex: 1;
  margin: 0 10px;
}

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

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

.title.active {
  background-color: #ddd;
}

.title.active + .content {
  display: block;
} 

代码说明：

首先，我们使用flex布局，将所有的item块排成一行。每个item块包含一个标题和一个内容，其中标题和内容分别用.title和.content类表示。

在CSS样式中，我们设置title块的背景色和鼠标指针的样式，并将content块设置为不显示。

当用户点击某个title块时，我们使用JavaScript代码来为其添加一个.active类，表示该块处于激活状态。同时，我们使用CSS选择器来设置该.active类下所有同级的.content块显示出来。

总的来说，CSS中的左右手风琴效果实现起来比较简单，可以使用flex布局和JavaScript操作来实现。