使 Bootstrap Collapse 上的面板标题可单击

Question

我正在尝试解决我网站上的这个小问题。我正在使用 Bootstrap 手风琴作为我网站的一部分。目前，只有当您单击面板标题上的文本时，才会打开选项卡。我希望能够单击面板标题并让它打开隐藏内容，而不是文本作为打开隐藏内容的按钮。但我不知道该怎么做。有人知道怎么做吗？

http://codepen.io/aahmed2/pen/yOQvVz

提前致谢！

这是我试图修复的部分（我无法让它看起来像这里的代码，所以请访问我提供给 Codepen 的链接）

<div class="panel panel-default col-md-4">
  <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
    <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <h2>Bites and Stings</h2>
    </a>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
      <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
      <a href="#"><h4>Bees and Wasps</h4></a>
      <a href="#"><h4>Animal Bites</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading pet-health" role="tab" id="headingTwo">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <h2>Pet Health and Safety</h2>
    </a>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <a href="#"><h4>Pet Allergies</h4></a>
      <a href="#"><h4>Toxic Plants</h4></a>
      <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
    </div>
  </div>
</div>


<div class="panel panel-default col-md-4">
  <div class="panel-heading livestock-health" role="tab" id="headingThree">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <h2>Livestock Health and Safety</h2>
    </a>
  </div>
  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
      <a href="#"><h4>This is a Topic</h4></a>
      <a href="#"><h4>Topic 2</h4></a>
      <a href="#"><h4>Another Topic</h4></a>
    </div>
  </div>
</div>

人畜共患病

细菌 真菌 寄生 朊病毒 立克次体 螺旋体 病毒

过敏

动物过敏 环境过敏

环境健康

这是一个主题 主题 2 另一个主题

Answer 1

你必须添加

role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

像这样的面板 div：

<div class="panel panel-default col-md-4" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
    <a >
      <h2>Bites and Stings</h2>
    </a>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
      <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
      <a href="#"><h4>Bees and Wasps</h4></a>
      <a href="#"><h4>Animal Bites</h4></a>
    </div>
  </div>
</div>

其他的依此类推