单击整个标题div时如何使Bootstrap 4手风琴折叠？

如果你想用Bootstrap 4来实现一个手风琴折叠的效果，当用户单击整个标题div时，可以使用以下代码来实现：

首先，需要在head中引入Bootstrap 4的库文件：

<link href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

然后，需要按照以下代码来实现手风琴：

<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">
          Title 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Content 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">
          Title 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Content 2
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Title 3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Content 3
      </div>
    </div>
  </div>
</div>

这里有三个标题div，每个div都包含一个标题以及对应的内容。由于需要实现单击整个标题div就可以实现折叠，所以需要添加以下代码：

$(document).ready(function(){
  $(".card-header").click(function(){
    $(this).next(".collapse").collapse('toggle');
  });
});

这段代码将会在页面加载完毕后，为每个.card-header添加一个click事件监听器，当用户单击整个div时，它将切换显示/隐藏与该标题div相关联的内容。

以上就是使用Bootstrap 4实现单击整个标题div时，折叠手风琴的所有步骤。希望本文对你有所帮助！