索易電子雜誌多採用樹狀目錄，當滑鼠點選主目錄時，展開子目錄；當再次點選主目錄時，則關閉子目錄。顯得簡捷明快，樸實無華。
製作這種樹狀目錄的方法較多，最近我先看下面的範例：當用滑鼠在主目錄上點一下，就下拉出對應的子目錄，再點一下，又恢復原狀，其效果與索易電子雜誌上的目錄效果完全一致。
製作方法：
我先將產生這種效果的程式碼複製如下，然後結合程式碼來製作方法：
〈div id="main1" style="color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ 主目錄1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- 子目錄1〈/a〉 〈br〉
〈 a href="#"〉- 子目錄2〈/a〉 〈br〉
〈a href="#"〉- 子目錄3〈/a〉 〈br〉
〈a href="#"〉- 子目錄3〈/a〉 〈br〉
〈a href="#" 〉- 子目錄4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all .child2.style.display ==''none'')?'''':''none''" 〉
+ 主目錄2 〈/div〉
〈div id="child2" style= "display:none"〉
〈a href="#"〉- 子目錄1〈/a〉 〈br〉
〈a href="#"〉- 子目錄 2〈/a〉 〈br〉
〈a href="#"〉- 子目錄3〈/a〉
〈/div〉
註：「 」表示一個字元空格
1、先定義兩個DIV，一個用於主目錄，取名為：main1；另一個用於對應的子目錄，取名為：child1。 2、在main1的DIV中寫上“+ 主目錄1”，並在它的上面加載一個滑鼠單擊事件：onclick 和一小段Javascript程式：document.all.child1.style.display= (document.all. child1.style.display ==''none'')?'''':''none''。這段程式的作用是，當滑鼠在main1的DIV上（也就是在「+ 主目錄1」上）點擊時，如果child1的DIV是隱藏的，讓它顯示；若是顯示的，則讓它隱藏。
3、在child1的DIV上寫上子目錄，並把它設置成超級鏈接，我在上面的示例中是設置了空鏈接，實際製作時把它改為實鏈接，以讓它指向鏈接目標。在child1的DIV定義中加上一個CSS： style="display:none"，其目的是讓子目錄開始時處於隱藏狀態。