自從接觸了Blogger以及工作上的一些需要，被迫要“再次溫習”JavaScript，以個人的經驗分享一個分類選單…
之前曾經看過有人製作相關的選單，不過有些不適用於Firefox，而我的這個超簡單語法是可以適用於Firefox的～
其實此法是由 How can I make show/hide links for my posts? 來延伸應用…
首先，秀一下範例：
廢話不多說，直接看原始碼：
<style type="text/css">
.posthidden {display:none}
.postshown {display:inline}
</style>
<script type="text/Javascript">
function expandcollapse (postid) { whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico1')">┌─賤狗地盤五四三─┐</div>
<div class="postshown" id="chico1">
<a href="http://blog.yam.com/tony1861/archives/cat_128244.html">＊犯罪實錄＊</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149299.html">＊作案現場＊</a>
</div>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico2')">┌─狗奴才私密禁區─┐</div>
<div class="posthidden" id="chico2">
<a href="http://blog.yam.com/tony1861/archives/cat_128246.html">無病呻吟碎碎唸</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_152324.html">影音分享大小事</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_128282.html">好康Ａ倒相報</a>
</div>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico3')">┌─Blog 程式研習庫─┐</div>
<div class="posthidden" id="chico3">
<a href="http://blog.yam.com/tony1861/archives/cat_149287.html">╔ HTML</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149291.html">╠ CSS</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149293.html">╠ JavaScript</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149296.html">╚ Other</a>
</div>
.posthidden {display:none}
.postshown {display:inline}
</style>
<script type="text/Javascript">
function expandcollapse (postid) { whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico1')">┌─賤狗地盤五四三─┐</div>
<div class="postshown" id="chico1">
<a href="http://blog.yam.com/tony1861/archives/cat_128244.html">＊犯罪實錄＊</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149299.html">＊作案現場＊</a>
</div>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico2')">┌─狗奴才私密禁區─┐</div>
<div class="posthidden" id="chico2">
<a href="http://blog.yam.com/tony1861/archives/cat_128246.html">無病呻吟碎碎唸</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_152324.html">影音分享大小事</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_128282.html">好康Ａ倒相報</a>
</div>
<div style="cursor:pointer;" onclick="javascript:expandcollapse('chico3')">┌─Blog 程式研習庫─┐</div>
<div class="posthidden" id="chico3">
<a href="http://blog.yam.com/tony1861/archives/cat_149287.html">╔ HTML</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149291.html">╠ CSS</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149293.html">╠ JavaScript</a>
<br>
<a href="http://blog.yam.com/tony1861/archives/cat_149296.html">╚ Other</a>
</div>
這是個簡單的JavaScript，其中需要注意“紅色”、“藍色”的部份
紅色的部份是分類名稱(請用英文命名)，必須取“不同的名稱”來“對應相關文章”，
像是本站中有三個分類：賤狗地盤五四三、狗奴才私密禁區、Blog 程式研習庫；
分別取名為：chico1、chico2、chico3，依此類推…
而藍色的部份是設定“預設是否顯示或隱藏”，
像是範例中預設將“賤狗地盤五四三”內的相關文章“預設顯示出來”，
那麼就設定為“postshown”，反之，就設定成“posthidden”…
至於在樂多中的加入方法是：Blog管理頁面 --> 新增插入欄位 --> 自由欄位(追加按鈕)
再將程式碼加入即可！
不過，此法卻有一個缺點，就是無法顯示“文章數量”，所以請自行取捨囉～
