Bootstrap-折叠插件

Bootstrap-折叠插件是一款强大的前端开发插件，用于创建基于jQuery的可折叠组件。它可以在网站和Web应用程序中添加动态和交互式内容。

特点

1. 灵活性：折叠插件允许创建不同的折叠效果。您可以使用单击、鼠标悬停和其他交互事件来触发折叠。它还可以与其他Bootstrap组件一起使用，例如导航菜单、警告框和进度条。

2. 容易使用：Bootstrap-折叠插件是一款易于使用的插件，支持多种配置选项。这使得它非常适合不同的开发需求。不管您是初学者还是专业程序员，都可以快速使用它来实现所需功能。

3. 扩展性：折叠插件是使用JavaScript编写的，因此您可以根据需要进行扩展和自定义。您可以使用插件提供的API来添加自定义功能或修改现有功能。

示例代码

HTML

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          折叠标题1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容1
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          折叠标题2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容2
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          折叠标题3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容3
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function(){
  $('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
  }).on('hidden.bs.collapse', function () {
    $(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
  });
});

Markdown

# Bootstrap-折叠插件

Bootstrap-折叠插件是一款强大的前端开发插件，用于创建基于jQuery的可折叠组件。它可以在网站和Web应用程序中添加动态和交互式内容。

## 特点

1. 灵活性：折叠插件允许创建不同的折叠效果。您可以使用单击、鼠标悬停和其他交互事件来触发折叠。它还可以与其他Bootstrap组件一起使用，例如导航菜单、警告框和进度条。

2. 容易使用：Bootstrap-折叠插件是一款易于使用的插件，支持多种配置选项。这使得它非常适合不同的开发需求。不管您是初学者还是专业程序员，都可以快速使用它来实现所需功能。

3. 扩展性：折叠插件是使用JavaScript编写的，因此您可以根据需要进行扩展和自定义。您可以使用插件提供的API来添加自定义功能或修改现有功能。

## 示例代码

### HTML

```html
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          折叠标题1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容1
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          折叠标题2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容2
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          折叠标题3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        折叠内容3
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function(){
  $('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
  }).on('hidden.bs.collapse', function () {
    $(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
  });
});