Javascript 更改引导程序手风琴配置

我用Bootstrap4.1.0在我的网站上实现了这个引导手风琴

<div id="accordion" class="mt-3">
   <div class="card">
       <div class="card-header bg-dark text-white" id="headingOne">
           <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
               Title 1
           </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 bg-dark text-white" id="headingTwo">
           <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
               Title 2
           </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
           <div class="card-body">
               Content 2
           </div>
        </div>
   </div>
</div>

问题是，如果我想打开或关闭手风琴的任何卡片，我必须点击h5标签，它显然比包含它的div薄。你可以在这张照片上看到我的意思：

---

如果你不点击h5，手风琴就不会打开。我想更改它，使其在您单击整个卡头上的任何位置时打开。

因此您已经在帖子中解释了问题：。卡头应用了一个不可单击的填充，因为为Accordion组件供电的JavaScript会在您的卡头上查找事件。最简单的方法是从.card头中删除填充并将其应用于

Bootstrap提供的实用程序类允许您在不使用任何其他自定义CSS:p的情况下执行此操作*-*

标题1 内容1 标题2 内容2

---

你能提供一个活生生的例子来解决这个问题吗？我能使用jQuery吗？这正是我想要实现的。我不认为是填充物引起的。谢谢你抽出时间。