WEB設計裡什麼是樹？簡單講，點擊一個鏈接，會展開下級目錄，再點擊會合上，這個就是最簡單的樹，如何去實現呢，也很簡單，css裡有一個屬性display，這個可以控制內容的現實還是不顯示，那麼再通過js來控制css的屬性即可實現，看如下代碼：
<div>頂級目錄</div>
<div id=menulist>
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
這個就算是樹的原型了，當然初始狀態給他加上css的display屬性，display最常用的是none和block屬性
none即不顯示，而block則像塊類型元素一樣顯示，再看代碼
<div>頂級目錄</div>
<div id=menulist style=display:none>
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
如此一來，運行該頁面，則只顯示頂級目錄，如果控制呢，則需要加入js代碼
1.先獲得menulist
var menulist=document.getElementById(menulist);
2.或者該對像後即可控制其CSS屬性
menulist.style.display=block;
加判斷
if (menulist.style.display=none)
menulist.style.display=block;
else
menulist.style.display=none;
這樣最原始的樹就生成了，最終代碼
<script>
function showmenu()
{
var menulist=document.getElementById(menulist);
if (menulist.style.display==none)
menulist.style.display=block;
else
menulist.style.display=none;
}
</script>
<div on
click=showmenu();>頂級目錄</div>
<div id=menulist style=display:none>
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
曾經在很長一段時間裡，我都按照該方法來製作屬性目錄，不管要製作的目錄有多複雜，該方法屢試不爽，以下截圖是我做的比較複雜的樹形目錄在IE下的運行效果：
可怕的事情發生在chrome下看全亂了，經過一番信息檢索，終於找到原因，display除了block和none外，尚有很多其他屬性，block是以塊狀顯示，我那上面是以表格來佈局的，天知道table和block是不是有深仇大恨，微軟自以為聰明地無視了他們的仇恨，而chrome還是很老實地遵守標準，firefox也是一樣，所以在他們的解釋裡還是有問題的，那怎麼解決這個問題：
display還有一個屬性table-cell，即以table的形式來渲染內容，這個正好符合我使用table來佈局的情況，以下為三個瀏覽器的兼容效果圖：
IE6
chrome2
firefox3.5