[Blogger] 側邊欄元件收合
網頁上總是會放些有的沒的Javascript，這樣看起來頁面比較「豐富」一點，但是東西一多就會變得很雜很亂，而且放這麼多東西上去，開網頁的速度就會被拖慢，而且有些Javascript會讀取很久，效能不高。
為了解決這問題，就要派上這個Javascript啦！雖然他也是Javascript，但是不大會影響到讀取速度，最重要的功能就是，可以把側邊欄的元件收合起來剩下標題，這樣畫面就清爽許多啦！
不過這個功能只是把側邊欄元件收合起來，並不是說他就沒有讀取，所以他還是會先全部讀取完，然後在進行下一步看是要隱藏還是要顯現。所以呢，要讓網頁讀取速度快的最根本大法就是：不要放太多東西在頁面上。
開始囉！先到 版面配置>修改html，然後要點選展開小裝置範本
① 把下面這些程式碼複製貼在 <head> </head> 標籤內、</style> 後面。<script type='text/javascript'>
<!-- Function used for Sidebar Element Toggling: ElementToggle()-->
function ElementToggle(id) {
var element = document.getElementById(id).getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
attribute = element[i].getAttribute('id');
if(attribute == 'toggle')
{
if (element[i].style.display == 'none')
element[i].style.display = 'inline';
else
element[i].style.display = 'none';
}
}
}
</script>
② 找到要展開收合的元件，找<b:widget id='HTML6' locked='false' title='Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
............. (略過)
</b:includable>
</b:widget>
③ 例如我要「Search」這個元件可以展開收合，而且「預設收合」，那就照下面紅色字的地方這樣設定，不過要注意一點就是黃色底色 (HTML6) 的地方，兩個的id要一樣才可以！<b:widget id='HTML6' locked='false' title='Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><a href='javascript:void(0);' onclick='javascript:ElementToggle("HTML6");'>[+/-]</a>
<data:title/></h2>
</b:if>
<div class='widget-content' id='toggle' style='display:none;'>
............. (程式內文略過不表)
</b:includable>
</b:widget>
④ 如果想要他是「預設展開」的話，只要把 綠色底色的 style='display:none;' 刪掉就可以囉！
至於他到底是什麼樣的原理呢？簡單說就是利用CSS把他「藏」起來而已，很不賴的一個Javascript。⊙ Fun 足 | 側邊欄元件可展開收合（Sidebar Element.toggle）
⊙ Abin's Tech Note | 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
又搬家啦！
13 年前
