纯css实现手风琴折叠面板箭头旋转

实现效果如上图:

需要准备一张箭头图片:如下

1. html代码片段:

<div class="field">
    <input type = "checkbox" id="l1" class="ipt">
    <label for = "l1" class="lab">
      <span>
        open me
      </span>
      <img
        width = "16px"
        height = "16px"
        src="arrow.png">
    </label>
    <div class="content">
      <p>111111211</p>
      <p>222222222</p>
    </div>
  <div>
    <input type = "checkbox" id="l2" class="ipt">
    <label for = "l2" class="lab">
      <span>
        open me
      </span>
      <img
        width = "16px"
        height = "16px"
        src="arrow.png"
      >
    </label>
    <div class="content">
      <p>11111111</p>
      <p>222222222</p>
    </div>
  </div>
  <div>
    <input type = "checkbox" id="l3" class="ipt">
    <label for = "l3" class="lab">
      <span>
        open me
      </span>
      <img
        width = "16px"
        height = "16px"
        src="arrow.png">
    </label>
    <div class="content">
      <p>11111111</p>
      <p>222222222</p>
    </div>
</div>
  </div>

2.css部分:

.field{
  width: fit-content;
}
.lab{
  display: flex;
  align-items: center;
  width:fit-content ;
  height: fit-content;
  background-color: #eeeeee;
  border-bottom: 1px solid #d9d9d9;
}
.content{
  width: fit-content;
  height: 0;
  overflow: hidden;
  transition: height .3s linear;
}
.ipt{
  display: none;
}
.ipt:checked ~ .content{
  height: fit-content;
}
.ipt:checked ~ .lab img{
  transform: rotate(90deg);
}

主要实现是利用label标签可与checkbox的id绑定,将input的type设为checkbox,再将input隐藏即可;其次则考察css兄弟元素选择器的使用