CSS制作樹狀目錄教程_CSS/HTML

本篇詳細(xì)介紹如何利用CSS能方便地控制對(duì)象的“顯示”和“隱藏”屬性原理，制作一個(gè)樹狀目錄，用CSS制作這樣的樹狀目錄，方法簡單，代碼也比較少，所以把它寫出來，給網(wǎng)友們共亨，以便在需要的時(shí)候也可動(dòng)手做一個(gè)。

索易電子雜志大多采用樹狀目錄，當(dāng)鼠標(biāo)點(diǎn)擊主目錄時(shí)，展開子目錄；當(dāng)再次點(diǎn)擊主目錄時(shí)，則關(guān)閉子目錄。顯得簡捷明快，樸實(shí)無華。

制作這種樹狀目錄的方法較多，最近我先看下面的示例：當(dāng)用鼠標(biāo)在主目錄上點(diǎn)一下，就下拉出相應(yīng)的子目錄，再點(diǎn)一下，又恢復(fù)原狀，其效果與索易電子雜志上的目錄效果完全一致。

　　 制作方法：
　　 我先把產(chǎn)生這種效果的代碼復(fù)制如下，然后結(jié)合代碼講制作方法：
〈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〉
　　 注：“ ”表示一個(gè)字符空格
　 　1、先定義兩個(gè)DIV，一個(gè)用于主目錄，取名為：main1；另一個(gè)用于相應(yīng)的子目錄，取名為：child1。　　2、在main1的DIV中寫上“+ 主目錄1”，并在它的上面加載一個(gè)鼠標(biāo)單擊事件：onclick 和一小段Javascript程序：document.all.child1.style.display= (document.all.child1.style.display ==''none'')?'''':''none''。這段程序的作用是，當(dāng)鼠標(biāo)在main1的DIV上（也就是在“+ 主目錄1”上）單擊時(shí)，如果child1的DIV是隱藏的，讓它顯示；若是顯示的，則讓它隱藏。
　　 3、在child1的DIV上寫上子目錄，并 把它設(shè)置成超級(jí)鏈接，我在上面的示例中是設(shè)置了空鏈接，實(shí)際制作時(shí)把它改為實(shí)鏈接，以讓它指向鏈接目標(biāo)。在child1的DIV定義中加上一個(gè)CSS： style="display:none"，其目的是使子目錄開始時(shí)處于隱藏狀態(tài)。
　　 其它目錄的制作只是重復(fù)上面的三步而已。按F12就可看到 效果了。這種方法主要是利用了CSS的顯示屬性：display，它有一個(gè)特點(diǎn)就是當(dāng)對(duì)象被隱藏后，對(duì)象所占據(jù)的頁面空間將自動(dòng)讓出。我們知道CSS還一 個(gè)屬性：visibility也具有顯示和隱藏的對(duì)象的功能，但不能用來制作上面的樹狀目錄。因?yàn)閂isibility在隱藏對(duì)象后，對(duì)象所占據(jù)的空間并 不釋放，也就是當(dāng)隱藏子目錄時(shí)，子目錄的位置只是一片空白而已位置并沒有讓出來，因此另一個(gè)主目錄也就無法靠攏。所以它只能用于那些需要固定頁面元素位置 的地方。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com