js左側多級菜單動態的解決方案

2019-11-21 00:46:38

字體：大中小

來源：轉載

供稿：網友

 
<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> 

這就出現兩次類別了，點父級顯示（隱藏）子級菜單，JS代碼也就一句話：

復制代碼代碼如下:

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

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

復制代碼代碼如下:

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