www.成人在线,精品国产青草久久久久96

WEB設(shè)計(jì)里什么是樹？簡(jiǎn)單講，點(diǎn)擊一個(gè)鏈接，會(huì)展開下級(jí)目錄，再點(diǎn)擊會(huì)合上，這個(gè)就是最簡(jiǎn)單的樹，如何去實(shí)現(xiàn)呢，也很簡(jiǎn)單，css里有一個(gè)屬性display，這個(gè)可以控制內(nèi)容的現(xiàn)實(shí)還是不顯示，那么再通過(guò)js來(lái)控制css的屬性即可實(shí)現(xiàn)，看如下代碼：
<div>頂級(jí)目錄</div>
<div id="menulist">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
這個(gè)就算是樹的原型了，當(dāng)然初始狀態(tài)給他加上css的display屬性，display最常用的是none和block屬性
none即不顯示，而block則象塊類型元素一樣顯示，再看代碼
<div>頂級(jí)目錄</div>
<div id="menulist" style="display:none">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
如此一來(lái)，運(yùn)行該頁(yè)面，則只顯示頂級(jí)目錄，如果控制呢，則需要加入js代碼
1.先獲得menulist
var menulist=document.getElementById("menulist");
2.或者該對(duì)象后即可控制其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();">頂級(jí)目錄</div>
<div id="menulist" style="display:none">
<div>菜單1</div>
<div>菜單2</div>
<div>菜單3</div>
</div>
曾經(jīng)在很長(zhǎng)一段時(shí)間里，我都按照該方法來(lái)制作屬性目錄，不管要制作的目錄有多復(fù)雜，該方法屢試不爽，以下截圖是我做的比較復(fù)雜的樹形目錄在IE下的運(yùn)行效果：

可怕的事情發(fā)生在chrome下看全亂了，經(jīng)過(guò)一番信息檢索，終于找到原因，display除了block和none外，尚有很多其他屬性，block是以塊狀顯示，我那上面是以表格來(lái)布局的，天知道table和block是不是有深仇大恨，微軟自以為聰明地?zé)o視了他們的仇恨，而chrome還是很老實(shí)地遵守標(biāo)準(zhǔn)，firefox也是一樣，所以在他們的解釋里還是有問(wèn)題的，那怎么解決這個(gè)問(wèn)題：
display還有一個(gè)屬性table-cell，即以table的形式來(lái)渲染內(nèi)容，這個(gè)正好符合我使用table來(lái)布局的情況，以下為三個(gè)瀏覽器的兼容效果圖：

IE6

chrome2

firefox3.5

標(biāo)簽：延安四川白銀貴陽(yáng) 錫林郭勒盟阿拉善盟濟(jì)南樂(lè)山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML&CSS&JS兼容樹（IE，F(xiàn)irefox，chrome）》，本文關(guān)鍵詞 HTML,amp,CSS,兼容,樹,Firefox,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

HTML&CSS&JS兼容樹（IE，F(xiàn)irefox，chrome）

HTML&CSS&JS兼容樹（IE，F(xiàn)irefox，chrome）