HTML&CSS&JS兼容樹（IE，Firefox，chrome）

2024-08-26 00:11:06

字體：大中小

來源：轉載

供稿：網友

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來布局的情況，以下為三個瀏覽器的兼容效果圖：