Bootstrap：如何折叠标题面板（减号链接）

Question

我正在使用默认折叠的 Twitter Bootstrap 折叠面板。

当我点击 + 图标或标题标题上的某处时，我可以打开该面板并查看其中的内容，但是当面板打开时减号用于折叠面板不可链接（标题为）。

所以，我想让那个减号图标是可链接的（在 HTML 代码下是 css 部分，您可以在内容上找到减号图标：“\f273”；在类 .panel-collapse .panel-heading:after 中）

更新

网上有例子： 链接是http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html 然后进入 Collapse->Accordion

（当您展开面板时找到它，但在折叠时 - （减号）不可链接）

这是我的代码

<div class="panel-group" data-collapse-color="red" id="faq" role="tablist" aria-multiselectable="true">

          <div class="panel panel-collapse">
              <div class="panel-heading" role="tab">
                  <h4 class="panel-title">
                      <a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#faq1" aria-expanded="false">
                          Panel 1
                      </a>
                  </h4>
              </div>
              <div id="faq1" class="collapse" role="tabpanel">
                <div class="panel-body">
                  Text in panel
                </div>
            </div>
          </div>
          ... (more DIV-s with panels)
      </div>

这里是相关的 CSS 文件

.panel-collapse .panel-heading {
  position: relative;
}
.panel-collapse .panel-heading .panel-title > a {
  padding: 8px 5px 16px 30px;
  color: #000;
  position: relative;
}
.panel-collapse .panel-heading .panel-title > a:after,
.panel-collapse .panel-heading .panel-title > a:before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  content: "";
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.panel-collapse .panel-heading .panel-title > a:after {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.panel-collapse .panel-heading:not(.active) .panel-title > a:before {
  background: #eee;
}
.panel-collapse .panel-heading:before,
.panel-collapse .panel-heading:after {
  font-family: 'Material-Design-Iconic-Font';
  font-size: 17px;
  position: absolute;
  left: 0;
  -webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 4px;
}
.panel-collapse .panel-heading:before {
  content: "\f278";
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.panel-collapse .panel-heading:after {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  content: "\f273";
}
.panel-collapse .panel-heading.active .panel-title > a:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.panel-collapse .panel-heading.active:before {
  -webkit-transform: scale(0) rotate(-90deg);
  -ms-transform: scale(0) rotate(-90deg);
  -o-transform: scale(0) rotate(-90deg);
  transform: scale(0) rotate(-90deg);
}
.panel-collapse .panel-heading.active:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.panel-collapse .panel-body {
  border-top: 0 !important;
  padding-left: 5px;
  padding-right: 5px;
}

谢谢！

Answer 1

因为没有答案，我会添加我的解决方法

.panel-collapse > .panel-heading > .panel-title > a {
  z-index: 1;
}

基本上它会使<a> 标记在减号上，<a> 将是可点击的