标题栏上的bootstrap div colapse点击

Question

有一个引导面板，当它的标题被点击时会崩溃。

如何在此面板上进行两项修改？

• 面板折叠和重新打开时在 标题栏上的任何位置的用户点击（灰色咏叹调）。

• 有什么办法可以避免使用fontawesome和坚持 Glyphicons？

没有onload脚本是首选，因为面板可能会动态添加。

.panel-heading a:after { 
 
    font-family:'Glyphicons Halflings'; 
 
    content:"\e114"; 
 
    float: right; 
 
    color: grey; 
 
} 
 
.panel-heading a.collapsed:after { 
 
    content:"\e080"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" id="panel1"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-target="#collapseOne" 
 
       href="#collapseOne"> 
 
      Collapsible Group Item #1 
 
      </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse in"> 
 
      <div class="panel-body"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

尝试下面的代码点击任何地方的灰色区域内：

.panel-heading a:after { 
 
    font-family:'Glyphicons Halflings'; 
 
    content:"\e114"; 
 
    float: right; 
 
    color: grey; 
 
} 
 
.panel-heading a.collapsed:after { 
 
    content:"\e080"; 
 
} 
 
.panel-default>.panel-heading { 
 
    padding: 0; 
 
} 
 
.panel-title a { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 10px 15px; 
 
} 
 
.panel-title a:hover, .panel-title a:focus { 
 
    text-decoration: none; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" id="panel1"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-target="#collapseOne" 
 
       href="#collapseOne"> 
 
      Collapsible Group Item #1 
 
      </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse in"> 
 
      <div class="panel-body"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

您可以使用display:block;锚标签，它是内部的panel-title

.collapseAnchor{ display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" id="panel1"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-target="#collapseOne" 
 
       href="#collapseOne" class="collapseAnchor"> 
 
      Collapsible Group Item #1 
 
      </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse in"> 
 
      <div class="panel-body"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam. 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>