js控制dd的隱藏與顯示

應朋友要求用js處理一下左側菜單的顯示與隱藏，雖然網上這方面的例子比較，但這個可能是有點獨特之處吧，特記錄下來。

 

轉載請註明出處   作者: 黎承湘

 

<div class="ContainerLeft"><br /> <dl><br /> <dt id="dt1"><a href="#" mce_href="#" onclick="showmenu(this,1)"><span class="icon product">產品管理</span></a></dt><br /> <dd><br /> <a href="Category_List.aspx" mce_href="Category_List.aspx"><span class="item">分類列表</span></a></dd><br /> <dd><br /> <a href="Category_Add.aspx" mce_href="Category_Add.aspx"><span class="item">添加分類</span></a></dd><br /> <dd><br /> <a href="Product_List.aspx" mce_href="Product_List.aspx"><span class="item">產品列表</span></a></dd><br /> <dd><br /> <a href="Product_Add.aspx" mce_href="Product_Add.aspx"><span class="item">添加產品</span></a></dd><br /> <dt id="dt2"><a href="#" mce_href="#" onclick="showmenu(this,2)"><span class="icon product">車型管理</span></a></dt><br /> <dd><br /> <a href="chexingList.aspx" mce_href="chexingList.aspx"><span class="item">車型列表</span> </a><br /> </dd><br /> <dd><br /> <a href="chexingadd.aspx" mce_href="chexingadd.aspx"><span class="item">添加車型</span> </a><br /> </dd><br /> <dt id="dt3"><a href="#" mce_href="#" onclick="showmenu(this,3)"><span class="icon product">品牌管理</span></a></dt><br /> <dd><br /> <a href="BrandList.aspx" mce_href="BrandList.aspx"><span class="item">品牌列表</span></a></dd><br /> <dd><br /> <a href="brand.aspx" mce_href="brand.aspx"><span class="item">添加品牌</span></a></dd><dd><br /> <dt id="dt4"><a href="#" mce_href="#" onclick="showmenu(this,4)"><span class="icon product">換購管理</span></a></dt><br /> <dd><br /> <a href="prochange.aspx" mce_href="prochange.aspx"><span class="item">換購產品</span></a></dd><br /> <dd><br /> <a href="prochange.aspx" mce_href="prochange.aspx"><span class="item">添加換購產品</span></a></dd><br /> <dt id="dt5"><a href="#" mce_href="#" onclick="showmenu(this,5)"><span class="icon erp">新聞管理</span></a></dt><br /> <dd><br /> <a href="News_list.aspx" mce_href="News_list.aspx"><span class="item">新聞列表</span></a></dd><br /> <dd><br /> <a href="NewsAdd.aspx" mce_href="NewsAdd.aspx"><span class="item">添加新聞</span></a></dd><br /> <dt id="dt6"><a href="#" mce_href="#" onclick="showmenu(this,6)"><span class="icon erp">協助管理</span></a></dt><br /> <dd><br /> <a href="HelpCol.aspx" mce_href="HelpCol.aspx"><span class="item">協助欄目</span></a></dd><br /> <dd><br /> <a href="HelpColAdd.aspx" mce_href="HelpColAdd.aspx"><span class="item">添加協助欄目</span></a></dd><br /> <dd><br /> <a href="Helps_list.aspx" mce_href="Helps_list.aspx"><span class="item">協助管理</span></a></dd><br /> <dd><br /> <a href="HelpsAdd.aspx" mce_href="HelpsAdd.aspx"><span class="item">添加協助</span></a></dd><br /> <dt id="dt7"><a href="#" mce_href="#" onclick="showmenu(this,7)"><span class="icon erp">友情連結</span></a></dt><br /> <dd><br /> <a href="LinksList.aspx" mce_href="LinksList.aspx"><span class="item">友情連結</span></a></dd><br /> <dd><br /> <a href="linksAdd.aspx" mce_href="linksAdd.aspx"><span class="item">添加友情連結</span></a></dd><br /> <dt id="dt8"><a href="#" mce_href="#" onclick="showmenu(this,8)"><span class="icon erp">站內連結</span></a></dt><br /> <dd><br /> <a href="weblinklist.aspx" mce_href="weblinklist.aspx"><span class="item">站內連結</span></a></dd><br /> <dd><br /> <a href="weblinkAdd.aspx" mce_href="weblinkAdd.aspx"><span class="item">添加站內連結</span></a></dd><br /> </dl><br /> <div class="LineHeight"><br /> </div><br /> </div></p><p> <mce:script type="text/javascript"><!--<br /> var dtid = 0; //記錄當前顯示的ID<br /> function showmenu(o,id){<br /> var obj = o.parentNode;<br /> var oNode = obj.nextSibling;<br /> if(parseInt(dtid) > 0) {<br /> hidemenu(dtid,'none');<br /> }<br /> if(dtid == id) dtid = 0;<br /> else {<br /> hidemenu(id);<br /> dtid = id;<br /> }<br /> }</p><p> function hidemenu(id,none) {<br /> var o = document.getElementById("dt"+id);<br /> var j = 0 ; //防止死迴圈<br /> var oNode = o.nextSibling;<br /> while(oNode != null && oNode.tagName != "DT" && j<8) {<br /> if(oNode.tagName == "DD") {<br /> if(none == null) oNode.style.display = "";<br /> else oNode.style.display=none;<br /> }<br /> j++;<br /> oNode = oNode.nextSibling;<br /> }<br /> }</p><p> function menuiload() {<br /> for(var i = 1;i<9;i++)<br /> hidemenu(i,'none');<br /> }</p><p> setTimeout(menuiload,1000)</p><p>// --></mce:script>