一· 引用文件：CSS: bootstrap.min js: 1. jquery-3.2.1.min 2. bootstrap.min
简介：1.Collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。 2.控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。
3.data-target="#id" 属性是对应折叠的内容 (<div id="demo">)
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性。
二· 运用Bootstarp搭建框架 目标完成效果图：
<!doctype html><html><head> <meta charset="utf-8"> <title>bootstrap4-Collapse 折叠</title> <link rel="stylesheet" rel="external nofollow" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script></head><body> <div class="container"> <h3 class="h3">Collapse</h3> <p> <a class="btn btn-primary" data-toggle="collapse" rel="external nofollow" href="#collapseExample"> Link 和 href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"> Button 和 data-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> <h3>人之有好也，学而顺之；人之有恶也，避而讳之，故阴道而阳取之也。</h3>如果对方有某种嗜好，就要仿效以迎合他的兴趣；如果对方厌恶什么，就要加以避讳以免引起反感。所以要进行隐密谋划而公开的进行获取。 </div> </div> <h3 class="h3 mt-2">多个目标</h3> <p> <a class="btn btn-primary" data-toggle="collapse" rel="external nofollow" href="#multiCollapseExample1">切换第一个元素</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2">切换第二个元素</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换两个元素</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> <h3>故知之始己，自知而后知人也。</h3>所以要想掌握情况，要先从自己开始，只有了解自己，然后才能了解别人。 </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> <h3>貌者不美，又不恶，故至情托焉。</h3>无论遇到什么事情，既不喜形于色，也不怒目相待的人，是让人感觉深沉的人，是一个值得信赖的人，是可以托之以机密大事的。 </div> </div> </div> </div> </div> <script> $('.collapse').collapse(); </script></body></html> 这样就全部完成了， 想要了解更多的私信
新手上路 多多支持❤