<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .collapse-toggle{ display: none; } .content{ max-height: 0px; overflow: hidden; transition: all .3s; } .collapse-toggle:checked~.content{ max-height: 250px; } .collapse-toggle:checked ~label .show{ display: none } .collapse-toggle:not(:checked) ~label .not-show{ display: none } .collapse-item{ margin: 10px; border-radius: 10px }</style><body> <div class="collapse-item"> <input type="checkbox" id="collapse1" checked name="collapse" class="collapse-toggle"></input> <label style="display: flex;" for="collapse1"> <div>第一个collapse</div> <img class="not-show" style="width: 20px;height: 20px;" src="http://csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042"> <img class="show" style="width: 20px;height: 20px;" src="https://img-blog.csdnimg.cn/2019091813595558.png"> </label> <div class="content"> 这个是切换内容<br/> 这个是切换内容<br/> 这个是切换内容<br/> </div> </div></body></html>