Question

我正在使用Twitter Bootstrap折叠面板，默认情况下已折叠。

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

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

更新

有在线示例：链接是http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html 然后转到折叠 - ＆gt;手风琴

（当你展开面板时它的发现，但是在折叠时 - （减号）是不可链接的）

有我的代码

<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>可点击

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

1 个答案: