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

我正在使用Twitter Bootstrap折叠面板，默认情况下会折叠。Bootstrap：如何折叠标题面板（负号链接）

当我点击+图标或somwhere上头的头衔，我可以打开该面板并查看它的内容，但是当面板打开减号用于折叠面板没有可链接（头标题）。

所以，我要作出这样的减号图标可链接（在HTML代码是CSS的一部分，你可以找到上的内容负图标：“\ F273”类.panel倒塌.panel-标题：后）

更新

有在线例如：链接是http://byrushan.com/projects/ma/1-6-1/jquery/light/components.html 并深入到Collapse->手风琴

（当你正在扩展面板中显示其发现，但崩溃 - （减号）不联）

有我的代码

<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; 
}

谢谢！

来源

2016-07-04 JohnWayneX

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

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

基本上它会让<a>标签在减号和<a>可点击

来源

2017-03-13 11:34:17 shadowreplicant

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

回答

相关问题