js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案
2024-05-06 14:11:40
供稿：網(wǎng)友
代碼如下:
<div><a onclick="news_pro('1.1')">1</a></div>
<div id="1.1" >
<div> <a onclick="news_pro('1.1.1')">1.1</a></div>
</div>
這就出現(xiàn)兩次類別了，點(diǎn)父級(jí)顯示（隱藏）子級(jí)菜單，JS代碼也就一句話：
代碼如下:
function news_pro(o)
{
var obj=document.getElementById(o)
obj.style.display==""? obj.style.display="none": obj.style.display="";
}
是不是有點(diǎn)太簡(jiǎn)單了，沒(méi)錯(cuò)，就是這么簡(jiǎn)單，不過(guò)還沒(méi)完，我們繼續(xù)往下看；接著添加三級(jí)和四級(jí)子菜單：
代碼如下:
<div><a onclick="news_pro('1.1')">1</a></div>
<div id="1.1">
<div> <a onclick="news_pro('1.1.1')">1.1</a></div>
<div id="1.1.1" >
<div> <A onclick="news_pro('1.1.1.1')">1.1.1</a></div>
<div id="1.1.1.1">
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1.1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
</div>
js代碼還是只有那一行，so easy吧，可是真的就這樣完了嗎？答案是NONONO！當(dāng)你點(diǎn)其中的一級(jí)時(shí)，頁(yè)面發(fā)生跳轉(zhuǎn)，這是我們想要的，但是左邊的菜單卻又變成了原來(lái)的樣子，并沒(méi)有保存我剛才點(diǎn)擊的狀態(tài)，那該怎么辦呢？因?yàn)橥率且玫紸SP里去，好像沒(méi)有視圖狀態(tài)這個(gè)東東，那用session保存嗎？好像能行得通，但是如果你點(diǎn)擊快一點(diǎn)，就發(fā)現(xiàn)菜單有時(shí)候點(diǎn)幾次都會(huì)不同，根本反應(yīng)不過(guò)來(lái)或是session丟失了，最后不巧我發(fā)現(xiàn)我的命名很有意思，一級(jí)是1，二級(jí)是1.1三級(jí)是1.1.1，四級(jí)是1.1.1.1，想到什么？想到了數(shù)據(jù)庫(kù)設(shè)計(jì)多級(jí)類別的查詢吧！？好像discuz里面的類別就是這么設(shè)計(jì)的。它查詢也很快，那我也給它來(lái)個(gè)快速的，靈機(jī)一動(dòng)，就so happy了。
代碼如下，采用url傳值的方式：
代碼如下:
<div><a onclick="news_pro('1.1')" href="?id=1.1">1</a></div>
<div id="1.1" <%If InStr(request.querystring("id"),"1.1")=0 Then response.write style='display:none;'%>>
<div> <a onclick="news_pro('1.1.1')" href="?id=1.1.1">1.1</a></div>
<div id="1.1.1" style="display:none;" <%If InStr(request.querystring("id"),"1.1.1")=0 Then response.write style='display:none;'%>>
<div> <A onclick="news_pro('1.1.1.1')" href="?id=1.1.1.1">1.1.1</a></div>
<div id="1.1.1.1" <%If InStr(request.querystring("id"),"1.1.1.1")=0 Then response.write style='display:none;'%>>
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1.1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
