[Javascript] Bootstrap - 使用大量 Collapse 與 錨點(anchor/hashchange) 處理

最近在使用 Bootstrap 來包裝 Web UI ，有一卡車多的東西就先用 Collapse 包起來，而官網的範例：

• Bootstrap:Panels
• Bootstrap:Collapse

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
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.
</div>
</div>

...
</div>

其中可以留意 collapseOne 的 class 屬性中有 in，這效果是預設展開。

然而，如果又額外做了個 Menu 維護這群 Panels/Collapse 時，希望點選某項時可以讓瀏覽器 scrollbar 移到恰當地點時，則需要處理一下：

HTML:

<div id="menu">
<ul>
<li><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">collapseOne</a></li>
<li><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo">collapseTwo</a></li>
<li><a data-toggle="collapse" data-target="#collapseThree" href="#collapseThree"> collapseThree </a></li>
</ul>
</div>

Javascript:

$(document).ready(function(){

$('a[href*=#]').click(function(e){
var target = $(this).attr('href');
//console.log($(this).attr('href'));
if( target[0] == '#' ) {
//target = target.substr(1);
if( $(target) && $(target).offset() && $(target).offset().top )
$('html,body').animate({
scrollTop: $(target).offset().top
}, 1000 );
}
});
});

然而，如果預設 Collopse 是關閉的，那上述可能無法正確顯示效果，則需要把錨點切換到預設不會關閉的地點，例如 panel-heading 的位置：

<div class="panel-group">
<div class="panel panel-default">
<div id="collapseOneHead" class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
....
</div>
</div>

...
</div>

而 Menu 的 href 則改為 collapseOneHead 即可：

<div id="menu">
<ul>
<li><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOneHead">collapseOne</a></li>
<li><a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwoHead">collapseTwo</a></li>
<li><a data-toggle="collapse" data-target="#collapseThree" href="#collapseThreeHead"> collapseThree </a></li>
</ul>
</div>

註：由於採用 CodeIgniter 的關係，在 錨點(anchor) 的變化有點不如預期，所以改在 <a> 點擊上處理，而非用偵測 hashchange 事件。