<!-- 1.基础 --> <!-- data-toggle:切换作用,href:关联作用,collapse默认是 hide属性,显示属性是show --> <button href="#collapseId" data-toggle="collapse">展开</button> <div class="collapse border" id="collapseId">你好明天,明天你好吗</div> <!-- 2.多个折叠菜单功能 --> <button href=".multi-collapse" data-toggle="collapse">按钮</button> <div class="collapse multi-collapse border" id="collapseId1">你好明天,明天你好吗1</div> <div class="collapse multi-collapse border" id="collapseId2">你好明天,明天你好吗2</div> <!-- 3.手风琴 --> <div class="accordion" id="accordion"> <div class="card"> <button class="" style="border:0px;" href="#collapseId1" data-toggle="collapse">按钮1</button> <div class="collapse" id="collapseId1" data-parent="#accordion">123</div> </div> <div class="card"> <button class="" style="border:0px;" href="#collapseId2" data-toggle="collapse">按钮2</button> <div class="collapse" id="collapseId2" data-parent="#accordion">123</div> </div> <div class="card"> <button class="" style="border:0px;" href="#collapseId3" data-toggle="collapse">按钮3</button> <div class="collapse" id="collapseId3" data-parent="#accordion">123</div> </div>