快捷導(dǎo)航

js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案

更新時(shí)間：2010年02月01日 00:30:25 作者：

實(shí)現(xiàn)的效果很簡單，就是點(diǎn)一下顯示，再點(diǎn)一下就隱藏，只不過是多了幾級(jí)的問題。好，現(xiàn)在來說說我的設(shè)計(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> 

這就出現(xiàn)兩次類別了，點(diǎn)父級(jí)顯示（隱藏）子級(jí)菜單，JS代碼也就一句話：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

代碼如下，采用url傳值的方式：

復(fù)制代碼代碼如下:

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

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

您可能感興趣的文章:

相關(guān)文章

JS打開層/關(guān)閉層/移動(dòng)層動(dòng)畫效果的實(shí)例代碼
JS打開層/關(guān)閉層/移動(dòng)層動(dòng)畫效果的實(shí)例代碼，需要的朋友可以參考一下
2013-05-05
微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法示例
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法，分別是navigator跳轉(zhuǎn)時(shí)、全局變量、列表index下標(biāo)取值以及form表單傳值的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
JavaScript實(shí)現(xiàn)時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)鐘特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
javascript中this做事件參數(shù)相關(guān)問題解答
有關(guān)this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來為大家介紹下this做事件參數(shù)問題，感興趣的你可不要錯(cuò)過了哈
2013-03-03
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對(duì)vite環(huán)境變量相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2023-10-10
JavaScript+HTML?實(shí)現(xiàn)網(wǎng)頁錄制音頻與下載
在這個(gè)數(shù)字化的時(shí)代,網(wǎng)頁端的音頻處理能力已經(jīng)成為一個(gè)非常熱門的需求,本文將詳細(xì)介紹如何利用 getUserMedia 和 MediaRecorder 這兩個(gè)強(qiáng)大的 API,實(shí)現(xiàn)網(wǎng)頁端音頻的錄制、處理和播放等功能,需要的朋友可以參考下
2024-07-07
javascript把15位身份證轉(zhuǎn)成18的函數(shù)
非常不錯(cuò)的，看了這個(gè)大家就明白身份證的運(yùn)算規(guī)則了
2008-10-10
Pyqt5實(shí)現(xiàn)多線程程序的使用示例
Pyqt常常使用主從架構(gòu)（Master-Workers 架構(gòu)）來避免界面卡死的情況,本文主要介紹了Pyqt5實(shí)現(xiàn)多線程程序的使用示例,感興趣的可以了解一下
2023-11-11
這篇文章主要介紹了js實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)游戲的方法,實(shí)例分析了javascript基于數(shù)組、隨機(jī)數(shù)等實(shí)現(xiàn)抽獎(jiǎng)游戲的技巧,需要的朋友可以參考下
2015-06-06