巧用CSS制作樹狀目錄

巧用CSS制作樹狀目錄
　　索易電子雜志大多采用樹狀目錄，當鼠標點擊主目錄時，展開子目錄；當再次點擊主目錄時，則關閉子目錄。顯得簡捷明快，樸實無華。制作這種樹狀目錄的方法較多，最近我利用CSS能方便地控制對象的“顯示”和“隱藏”屬性原理，也制作一個，我感到用CSS制作這樣的樹狀目錄，方法簡單，代碼也比較少，所以把它寫出來，給網友們共亨，以便在需要的時候也可動手做一個。先看下面的示例：當用鼠標在主目錄上點一下，就下拉出相應的子目錄，再點一下，又恢復原狀，其效果與索易電子雜志上的目錄效果完全一致。
　　制作方法：
　　把產生這種效果的代碼復制如下，然后結合代碼講制作方法：
〈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="#"〉- 子目錄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"，其目的是使子目錄開始時處于隱藏狀態。
　　其它目錄的制作只是重復上面的三步而已。按F12就可看到效果了。這種方法主要是利用了CSS的顯示屬性：display，它有一個特點就是當對象被隱藏后，對象所占據的頁面空間將自動讓出。我們知道CSS還一個屬性：visibility也具有顯示和隱藏的對象的功能，但不能用來制作上面的樹狀目錄。因為Visibility在隱藏對象后，對象所占據的空間并不釋放，也就是當隱藏子目錄時，子目錄的位置只是一片空白而已位置并沒有讓出來，因此另一個主目錄也就無法靠攏。所以它只能用于那些需要固定頁面元素位置的地方。