javascript - 使 Bootstrap Collapse 上的面板标题可点击

Question

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

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>

其他的依此类推