用 javascript 寫一個可隱藏或顯現的清單

使用 部落格 不到十天，對其功能還不是完全清楚。在其提供的 小工具 中，一直想找一個可以隱藏或顯現的清單。但是部落格站提供的小工具將近四萬種，實在不知如何找起。因此決定自己寫一個簡單的 javascript 程式，可以將清單隱藏或顯現。

使用方法：

1. 先在 新增小工具 選『HTML/JavaScript』小工具，加入你的部落格網頁。
2. 編輯『HTML/JavaScript』小工具，將下面的程式拷貝到其中。你可以免費使用這支程式。
3. 用你需要的文字，取代程式中的『文章清單』，『項目一』等等。其中『項目二』含有超連結的標籤。你可以用拷貝產生新的項目；拷貝時，你必須包含以下內容： <li> 項目 </li>。
4. 然後儲存，就可以使用了。

<script type="text/javascript"> function showList(ls) { var obj=document.getElementById(ls); if(obj.style.display=='none') obj.style.display=''; else obj.style.display='none'; } </script> <span onclick="showList('list1')">文章清單</span> <ul id="list1" style="background:white;display:"> <li> 項目一 </li> <li> <a href='http://google.com'> 項目二 </a> </li> <li> 項目三 </li> </ul>

試用：你可以使用滑鼠左鍵，點擊下面的『文章清單』。
文章清單

• 項目一
• 項目二
• 項目三

程式說明：

1. 此程式使用到以下 HTML 標籤：
• SPAN ：其結尾標籤是</span >。span 用來宣告一段文字的屬性；在此處 span 中加上了 onclick="showList('list1')"。onclick 代表用滑鼠左鍵點擊，然後執行 showList('list1') 這個函式。其中 list1 是下面 ul 的 ID。
• UL ：這是清單的開始標籤，其結尾標籤是</ul >。使用清單的好處是可以排列整齊。
  在此 ul 加上了 id="list1" style="background:white;display:"。其中 background 指背景顏色，設為白色（white）。display 表示表格的顯示方法，可設為 none 達到隱藏清單的效果。
• LI ：其結尾標籤是</li >。li 表示一個清單的項目。
• A ：其結尾標籤是</a >。此標籤用於超連結。此處加上了 href='http://google.com'。你可以用其他網址取代。
2. javascript 程式：此程式很簡單，用到以下指令。
• <script type="text/javascript"> ：其結尾標籤是</script >。script 宣告 javascript 指令的區段。
• function showList(ls)：此指令宣告函式 showList(ls)，函式名稱為 showList，傳遞的參數名稱為 ls。
• var obj=document.getElementById(ls)：此處宣告一個變數 obj，並且用指令 document.getElementById(ls) 取得物件的指標，然後將指標存入變數 obj。在前面的 span 中會傳遞 li 這個物件的 ID。
• if(obj.style.display=='none')
  obj.style.display='';
  else
  obj.style.display='none';。
  測試物件（指標存於 obj）的 display，如果是 'none'，則設為 ''（顯現清單）；反之，則設為 'none'（隱藏清單）。display 的值在 'none' 和 '' 互換，達到隱藏與顯現清單的功能。

如果你用 obj.style.visibility='collapse' 來隱藏清單，此法只能在 firefox 工作，而不能用在 IE。

相關文章：展開式選單，橫列的清單，javscript 展開式選單。