您當(dāng)前位置：
首頁 >
web前端 >
jscript > JavaScript 左側(cè)多級菜單動態(tài)的實(shí)現(xiàn)方法
JavaScript 左側(cè)多級菜單動態(tài)的實(shí)現(xiàn)方法
來源：程序員人生 發(fā)布時(shí)間：2014-04-21 12:21:17 閱讀次數(shù)：3545次
關(guān)于js左側(cè)多級菜單動態(tài)的問題，實(shí)現(xiàn)的效果很簡單，就是點(diǎn)一下顯示，再點(diǎn)一下就隱藏，只不過是多了幾級的問題。好，現(xiàn)在來說說我的設(shè)計(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)父級顯示（隱藏）子級菜單，JS代碼也就一句話：
function news_pro(o)
{
var obj=document.getElementById(o)
obj.style.display==""? obj.style.display="none": obj.style.display="";
}
是不是有點(diǎn)太簡單了，沒錯(cuò)，就是這么簡單，不過還沒完，我們繼續(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>
<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>
