1、折叠卡片或显示卡片（面板）

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <p>
  4.             <!-- a与button的不同之处：data-target="#kengdie"：放的是id值，也可以是class：.class值 -->
  5.             <a href="#kengdie" class="btn btn-primary" data-toggle="collapse">坑爹</a>
  6.             <button class="btn btn-primary" data-toggle="collapse" data-target="#kengdie">坑爹</button>
  7.         </p>
  8.         <!-- collapse：折叠卡片基础的样式：隐藏 -->
  9.         <div class="collapse show" id="kengdie">
  10.             <div class="card card-body">
  11.                 坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。
  12.                 该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。
  13.             </div>
  14.         </div>
  15.     </div>
  16. </div>

2、多个目标：控制全部

  1. <div class="row mt-5">
  2.     <div class="col-12">
  3.         <p>
  4.             <a href="#diaosi" class="btn btn-primary" data-toggle="collapse">屌丝</a>
  5.             <button class="btn btn-primary" data-toggle="collapse" data-target="#tuhao">土豪</button>
  6.             <button class="btn btn-primary" data-toggle="collapse" data-target="#nvshen">女神</button>
  7.             <button class="btn btn-primary" data-toggle="collapse" data-target=".all">控制全部</button>
  8.         </p>
  9.     </div>
  10.     <div class="col-4 collapse all" id="diaosi">
  11.         <div class="card card-body">
  12.             屌丝 [1]
  13.             来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
  14.         </div>
  15.     </div>
  16.     <div class="col-4 collapse all" id="tuhao">
  17.         <div class="card card-body">
  18.             土豪，网络用语。原指乡下财大气粗、没什么品味的有钱人，现多指有钱、不理性消费、喜欢炫耀的人。出自《宋书·殷琰传》：“叔宝者，杜坦之子，既土豪乡望，内外诸军事并专之。”
  19.         </div>
  20.     </div>
  21.     <div class="col-4 collapse all" id="nvshen">
  22.         <div class="card card-body">
  23.             女神是一个汉语词语，拼音是nǚ
  24.             shén，意思指对女性的神明或至尊的称谓，特指神话传说中的女性至高者。后来引申为容貌漂亮、具有智慧、优雅、贞洁以及高素质的女性。在现代社会，女神常用来定义男性心目中喜爱，但难以成为真正恋爱对象的女生。
  25.         </div>
  26.     </div>
  27. </div>

3、手风琴

  1. <div class="row mt-5">
  2.     <div class="accordion" id="accordion"><!-- 手风琴所有的内容都要放在这个里面class="accordion" id="accordion" -->
  3.         <!-- 第一项 -->
  4.         <div class="card">
  5.             <div class="card-header">
  6.                 <button class="btn btn-link" data-toggle="collapse" data-target="#item1">屌丝</button><!-- data-target注意要和自己的相对应 -->
  7.             </div>
  8.             <div class="collapse show" id="item1" data-parent="#accordion"><!-- data-parent="#accordion"与手风琴的id相对应 -->
  9.                 <div class="card-body">
  10.                     屌丝 [1]
  11.                     来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
  12.                 </div>
  13.             </div>
  14.         </div>
  15.         <!-- 第二项 -->
  16.         <div class="card">
  17.             <div class="card-header">
  18.                 <button class="btn btn-link" data-toggle="collapse" data-target="#item2">土豪</button>
  19.             </div>
  20.             <div class="collapse" id="item2" data-parent="#accordion">
  21.                 <div class="card-body">
  22.                     屌丝 [1]
  23.                     来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!-- 第三项 -->
  28.         <div class="card">
  29.             <div class="card-header">
  30.                 <button class="btn btn-link" data-toggle="collapse" data-target="#item3">女神</button>
  31.             </div>
  32.             <div class="collapse" id="item3" data-parent="#accordion">
  33.                 <div class="card-body">
  34.                     屌丝 [1]
  35.                     来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
  36.                 </div>
  37.             </div>
  38.         </div>
  39.     </div>
  40. </div>

4、js的方法与事件：js写折叠面板

  1. <div class="row mt-5">
  2.     <div class="col">
  3.         <p>
  4.             <a href="javascript:;" class="btn btn-primary myBtn">坑爹</a>
  5.         </p>
  6.         <div class="collapse show" id="myCollapse">
  7.             <div class="card card-body">
  8.                 坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。
  9.                 该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。
  10.             </div>
  11.         </div>
  12.     </div>
  13. </div>
  14. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  15. integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  16. crossorigin="anonymous"></script>
  17. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  18. integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  19. crossorigin="anonymous"></script>
  20. <script>
  21. $('.myBtn').click(function () {
  22.     //$('#myCollapse').collapse('hide');
  23.     //$('#myCollapse').collapse('show');
  24.     $('#myCollapse').collapse('toggle');    //可切换显示隐藏时间
  25. });
  26. //事件
  27. $('#myCollapse').on('show.bs.collapse', function () {
  28.     console.log('显示事件发生了'); //当调用show的方法的时候会触发此事件
  29. });
  30. $('#myCollapse').on('hide.bs.collapse', function () {
  31.     console.log('隐藏事件发生了'); //当调用hide的方法的时候会触发此事件
  32. });
  33. $('#myCollapse').on('shown.bs.collapse', function () {
  34.     console.log('折叠块完全显示了！');
  35. });
  36. $('#myCollapse').on('hidden.bs.collapse', function () {
  37.     console.log('折叠块完全隐藏了！');
  38. });
  39. </script>