標題欄上的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>