## **官方示例** https://v4.bootcss.com/docs/components/collapse/ ## **示例：** ``` <div class="sl3_top"> <p> <a class="btn btn-primary" data-toggle="collapse" href="#searchList1" role="button" aria-expanded="false" aria-controls="searchList1"> 产品类型 <span class="iconfont icon-shangjiantou"></span> </a> <a class="btn btn-primary" data-toggle="collapse" href="#searchList2" role="button" aria-expanded="false" aria-controls="searchList2"> 应用 <span class="iconfont icon-shangjiantou"></span> </a> </p> <div class="row" style="margin-top: 5px;"> <div class="col col-md-6"> <div class="collapse multi-collapse" id="searchList1"> <div class="card card-body"> <div class="check_list"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="searchListItem1"> <label class="form-check-label" for="searchListItem1"> ELISA Kit </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="searchListItem2"> <label class="form-check-label" for="searchListItem2"> Polyclonal Antibody </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Protein </label> </div> </div> <div class="clear_sure"> <p>全部清除</p> <button class="sure">确定</button> </div> </div> </div> </div> </div> <div class="row" style="margin-top: 5px;"> <div class="col col-md-6"> <div class="collapse multi-collapse" id="searchList2"> <div class="card card-body"> <div class="check_list"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> </div> <div class="clear_sure"> <p>全部清除</p> <button class="sure">确定</button> </div> </div> </div> </div> </div> </div> ``` ## **事件：** ``` // 当对用户隐藏折叠元素时触发此事件(将等待CSS转换完成) $('#myCollapsible').on('hidden.bs.collapse', function () { // do something... }) // 此事件在调用隐藏方法时立即触发。 $('#myCollapsible').on('hide.bs.collapse', function () { // do something... }) // 当用户可以看到折叠元素时触发此事件(将等待CSS转换完成)。 $('#myCollapsible').on('shown.bs.collapse', function () { // do something... }) // 此事件在调用show实例方法时立即触发 $('#myCollapsible').on('show.bs.collapse', function () { // do something... }) ```