Bootstrap手風琴點擊標題面板展開/摺疊

Question

我有這個問題：我的移動應用程序有一些基於Bootstrap的手風琴。默認行爲使得摺疊和展開僅適用於內部鏈接，而不是完整的標題面板。我需要改變這種情況，當用戶點擊標題面板的任何部分時，手風琴就會展開並摺疊。

Answer 1

我附帶這個解決方案。它不是很優雅，但工作。

HTML

<div class="panel panel-default"> 
<div class="panel-heading" onclick="javascript: expandAccordion(' HospitalsAcc ')"> 
    <a class="panel-title" data-toggle="collapse" data-parent="#TopStories" href="#HospitalsAcc">Hospitals</a> 
</div> 
<div id="HospitalsAcc" class="panel-collapse collapse" style="height: 0px;"> 
    <div class="panel-body" style="text-align: center"> 
     <p style="text-align: justify; margin: 0px">GeometryIndex: 1 </p> 
     <p style="text-align: justify; margin: 0px">NAME: HOSPITAL </p> 
     <p style="text-align: justify; margin: 0px">ADDRNO: 00 </p> 
    </div> 
</div> 

JS

function expandAccordion(param) { 
     param = param.trim(); 
     $('#'+param).collapse('toggle') 
    }; 

Answer 2

嗯，這是一個有點晚回覆你的答案，但是，這將是爲未來幫助。 如果我正確理解你的問題，你需要一個自舉手風琴，在點擊面板標題時展開和摺疊。那麼這裏是代碼：

\t function toggleIcon(e) { 
 
     $(e.target) 
 
      .prev('.panel-heading') 
 
      .find(".more-less") 
 
      .toggleClass('glyphicon-plus glyphicon-minus'); 
 
    } 
 
    $('.panel-group').on('hidden.bs.collapse', toggleIcon); 
 
    $('.panel-group').on('shown.bs.collapse', toggleIcon);

\t .panel-group .panel { 
 
\t \t border-radius: 0; 
 
\t \t box-shadow: none; 
 
\t \t border-color: #EEEEEE; 
 
\t } 
 

 
\t .panel-default > .panel-heading { 
 
\t \t padding: 0; 
 
\t \t border-radius: 0; 
 
\t \t color: #212121; 
 
\t \t background-color: #FAFAFA; 
 
\t \t border-color: #EEEEEE; 
 
\t } 
 

 
\t .panel-title { 
 
\t \t font-size: 14px; 
 
\t } 
 

 
\t .panel-title > a { 
 
\t \t display: block; 
 
\t \t padding: 15px; 
 
\t \t text-decoration: none; 
 
\t } 
 

 
\t .more-less { 
 
\t \t float: right; 
 
\t \t color: #212121; 
 
\t } 
 

 
\t .panel-default > .panel-heading + .panel-collapse > .panel-body { 
 
\t \t border-top-color: #EEEEEE; 
 
\t }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container demo"> 
 

 
\t 
 
\t <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 

 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingOne"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
\t \t \t \t \t \t <i class="more-less glyphicon glyphicon-plus"></i> 
 
\t \t \t \t \t \t Collapsible Group Item #1 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingTwo"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
\t \t \t \t \t \t <i class="more-less glyphicon glyphicon-plus"></i> 
 
\t \t \t \t \t \t Collapsible Group Item #2 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingThree"> 
 
\t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
\t \t \t \t \t \t <i class="more-less glyphicon glyphicon-plus"></i> 
 
\t \t \t \t \t \t Collapsible Group Item #3 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
\t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t </div><!-- panel-group --> 
 
\t 
 
\t 
 
</div><!-- container -->