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>

人畜共患疾病

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

过敏

动物过敏环境过敏

环境健康

这是一个主题主题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>

以及其他的

等

Answer 2

我将面板修改为这样（并删除了a（锚）标签，因为它不需要）

（注意：修复仅在下面的正在运行的代码中应用于第一个面板）

<div class="panel-heading bites-stings" 
     data-toggle="collapse" data-parent="#accordion,#accordion2"
     href="#collapseOne" aria-expanded="false" 
     aria-controls="collapseOne" role="tab" id="headingSeven">           
          <h2>Bites and Stings</h2>            
</div>

现在应该可以了。

还将此添加到您的CSS

div[role="tab"]:hover {
  cursor: pointer;
}

在下面运行示例（注意：修复仅在下面的运行代码中应用于第一个面板）

＆＃13;

div[role="tab"]:hover {
  cursor: pointer;
}

#accordion2 {
  margin-top: -20px;
}
.panel-heading:focus {
  outline: 0;
  border: none;
}
.panel-group {
  clear: both;
}
.panel-group .panel {
  border-width: 0;
  padding: 0 !important;
  border-radius: 0%;
}
.panel-group .panel-heading {
  height: 100px;
  text-align: center;
  color: #fff;
  padding-top: 2%;
  border: 1px solid #fff;
  border-radius: 0%;
  background-color: rgba(0, 0, 0, 0.5);
}
.panel-group .panel-heading h2 {
  color: #fff;
  text-shadow: 2px 2px 3px #000000;
  padding-top: 90px;
}
.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
  text-decoration: none !important;
}
.panel-group .panel-collapse {
  background-color: #DDDDDD;
}
.panel-group .panel-body {
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}
.panel-group > .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0%;
  color: #fff;
  height: 350px;
  text-align: center;
}
.bites-stings {
  background: url(http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/bee_honeycomb_03.jpg);
  background-size: cover;
}
.pet-health {
  background: url(http://petnetpull1.petnet.netdna-cdn.com/wp-content/uploads/2015/11/Pets-Dogs-Cats.jpg?c1906d);
  background-size: cover;
}
.livestock-health {
  background: url(https://aos.iacpublishinglabs.com/question/aq/700px-394px/what-is-a-group-of-cows-called_d87d5c1c-8102-4634-baea-c03e5bd8784f.jpg?domain=cx.aos.ask.com);
  background-size: cover;
}
.zoonotic {
  background: url(http://www.urdogs.com/wp-content/uploads/2015/08/talking-to-dog.jpg);
  background-size: cover;
}
.allergies {
  background: url(http://www.consostatic.com/wp-content/uploads/2009/03/allergie-au-pollen-symptomes-solutions-naturelles-plante-03.jpg);
  background-size: cover;
}
.environment-health {
  background: url(https://media-cdn.tripadvisor.com/media/photo-s/02/b5/36/97/lake-mcconaughy.jpg);
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-md-4">
      <div class="panel-heading  bites-stings" role="tab" id="headingSeven" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">

        <h2>Bites and Stings</h2>

      </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>
  </div>
</div>

<div class="row">
  <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
      <div class="panel-heading zoonotic" role="tab" id="headingFour">
        <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
          <h2>Zoonotic Diseases</h2>
        </a>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <a href="#"><h4>Bacterial</h4></a>
          <a href="#"><h4>Fungal</h4></a>
          <a href="#"><h4>Parasitic</h4></a>
          <a href="#"><h4>Prionotic</h4></a>
          <a href="#"><h4>Rickettsial</h4></a>
          <a href="#"><h4>Spirochetes</h4></a>
          <a href="#"><h4>Viral</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading allergies" role="tab" id="headingFive">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <h2>Allergies</h2>
        </a>
      </div>
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
        <div class="panel-body">
          <a href="#"><h4>Animal Allergies</h4></a>
          <a href="#"><h4>Environmental Allergies</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading environment-health" role="tab" id="headingSix">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          <h2>Environmental Health</h2>
        </a>
      </div>
      <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
        <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>
  </div>
</div>

＆＃13;

使Bootstrap上的Panel Heading折叠可点击

人畜共患疾病

过敏

环境健康

2 个答案: