Bootstrap 4:如何创建内含手风琴的下拉菜单？

Bootstrap 4是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网页。下面是如何创建内含手风琴的下拉菜单的步骤：

首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件。你可以从官方网站下载或使用CDN链接。
创建一个包含手风琴和下拉菜单的HTML结构。手风琴是一个可折叠的面板组，只展开一个面板，其他面板则折叠起来。下拉菜单是一个可展开的菜单。

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          手风琴标题1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        下拉菜单内容1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          手风琴标题2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        下拉菜单内容2
      </div>
    </div>
  </div>
</div>