ASP中js左側(cè)多級菜單動態(tài)的解決方案

360右鍵菜單管理獨(dú)立版V7.5.0.1022綠色免費(fèi)版

• 類型：系統(tǒng)優(yōu)化大小：1.7M語言：中文 評分：1.5
• 標(biāo)簽：

立即下載

昨晚想搞一個js菜單，搞了一個晚上都沒弄出來。后來百度了下，有點(diǎn)狂汗~~~

實(shí)現(xiàn)的效果很簡單，就是點(diǎn)一下顯示，再點(diǎn)一下就隱藏，只不過是多了幾級的問題。好，現(xiàn)在來說說我的設(shè)計思路，首先從第一級別開始，添加如下代碼：

<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)父級顯示（隱藏）子級菜單，JS代碼也就一句話：

function news_pro(o)
{
var obj=document.getElementById(o)
obj.style.display==""? obj.style.display="none": obj.style.display="";
}

是不是有點(diǎn)太簡單了，沒錯，就是這么簡單，不過還沒完，我們繼續(xù)往下看；接著添加三級和四級子菜單：

<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)其中的一級時，頁面發(fā)生跳轉(zhuǎn)，這是我們想要的，但是左邊的菜單卻又變成了原來的樣子，并沒有保存我剛才點(diǎn)擊的狀態(tài)，那該怎么辦呢？因?yàn)橥�事是要用到ASP里去，好像沒有視圖狀態(tài)這個東東，那用session保存嗎？好像能行得通，但是如果你點(diǎn)擊快一點(diǎn)，就發(fā)現(xiàn)菜單有時候點(diǎn)幾次都會不同，根本反應(yīng)不過來或是session丟失了，最后不巧我發(fā)現(xiàn)我的命名很有意思，一級是1，二級是1.1三級是1.1.1，四級是1.1.1.1，想到什么？想到了數(shù)據(jù)庫設(shè)計多級類別的查詢吧��？好像discuz里面的類別就是這么設(shè)計的。它查詢也很快，那我也給它來個快速的，靈機(jī)一動，就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>
</div>
<div><a >2</a></div>
<div><a >3</a></div>

我相信這個代碼不管理asp或是asp.net都區(qū)別不大，其實(shí)用純js也可以做到，不過既然是用在asp里的，干嘛要多寫js呢？好了，功能實(shí)現(xiàn)了。大家都OK了，如果你有不同的方法，歡迎貼出來大家一起分享。從學(xué)習(xí)中進(jìn)步。。。