[分享]css写一下向下的手风琴

CSS手风琴效果是指在网页上点击某个标签，可以展开或收起其它标签。这种效果通常被用于网页上的导航栏或折叠式内容展示。在CSS中，手风琴效果可以通过使用:hover伪元素和transition属性来实现...

CSS手风琴效果是指在网页上点击某个标签，可以展开或收起其它标签。这种效果通常被用于网页上的导航栏或折叠式内容展示。在CSS中，手风琴效果可以通过使用:hover伪元素和transition属性来实现。下面是一个简单的CSS手风琴示例：

 <div class="accordion">
    <div class="accordion-header">标签1</div>
    <div class="accordion-body">内容1</div>
    
    <div class="accordion-header">标签2</div>
    <div class="accordion-body">内容2</div>
    
    <div class="accordion-header">标签3</div>
    <div class="accordion-body">内容3</div>
  </div>
  
  /* CSS 代码 */
  .accordion-header {
    cursor: pointer;
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
  
  .accordion-header:hover {
    background-color: #aaa;
  }
  
  .accordion-body {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
  }
  
  .accordion-header.active + .accordion-body {
    height: 100px;
  } 

在上面的代码中，使用了一个div元素作为手风琴容器，并在其中添加了多个div元素作为手风琴的标签和内容。每个标签和内容都是用一个div元素来包裹的。标签元素拥有一个:hover伪元素，在鼠标悬停时改变其背景色。而内容元素的高度为0，overflow属性设置为hidden，当手风琴标签被点击时，被点击标签的下一个兄弟元素（即内容元素）的高度将被设置为一个固定值，从而实现了手风琴的展开和收起效果。