js控制dd的隐藏与显示

应朋友要求用js处理一下左侧菜单的显示与隐藏，虽然网上这方面的例子比较，但这个可能是有点独特之处吧，特记录下来。

 

转载请注明出处   作者: 黎承湘

 

<div class="ContainerLeft"> <dl> <dt id="dt1"><a href="#" mce_href="#" onclick="showmenu(this,1)"><span class="icon product">产品管理</span></a></dt> <dd> <a href="Category_List.aspx" mce_href="Category_List.aspx"><span class="item">分类列表</span></a></dd> <dd> <a href="Category_Add.aspx" mce_href="Category_Add.aspx"><span class="item">添加分类</span></a></dd> <dd> <a href="Product_List.aspx" mce_href="Product_List.aspx"><span class="item">产品列表</span></a></dd> <dd> <a href="Product_Add.aspx" mce_href="Product_Add.aspx"><span class="item">添加产品</span></a></dd> <dt id="dt2"><a href="#" mce_href="#" onclick="showmenu(this,2)"><span class="icon product">车型管理</span></a></dt> <dd> <a href="chexingList.aspx" mce_href="chexingList.aspx"><span class="item">车型列表</span> </a> </dd> <dd> <a href="chexingadd.aspx" mce_href="chexingadd.aspx"><span class="item">添加车型</span> </a> </dd> <dt id="dt3"><a href="#" mce_href="#" onclick="showmenu(this,3)"><span class="icon product">品牌管理</span></a></dt> <dd> <a href="BrandList.aspx" mce_href="BrandList.aspx"><span class="item">品牌列表</span></a></dd> <dd> <a href="brand.aspx" mce_href="brand.aspx"><span class="item">添加品牌</span></a></dd><dd> <dt id="dt4"><a href="#" mce_href="#" onclick="showmenu(this,4)"><span class="icon product">换购管理</span></a></dt> <dd> <a href="prochange.aspx" mce_href="prochange.aspx"><span class="item">换购产品</span></a></dd> <dd> <a href="prochange.aspx" mce_href="prochange.aspx"><span class="item">添加换购产品</span></a></dd> <dt id="dt5"><a href="#" mce_href="#" onclick="showmenu(this,5)"><span class="icon erp">新闻管理</span></a></dt> <dd> <a href="News_list.aspx" mce_href="News_list.aspx"><span class="item">新闻列表</span></a></dd> <dd> <a href="NewsAdd.aspx" mce_href="NewsAdd.aspx"><span class="item">添加新闻</span></a></dd> <dt id="dt6"><a href="#" mce_href="#" onclick="showmenu(this,6)"><span class="icon erp">帮助管理</span></a></dt> <dd> <a href="HelpCol.aspx" mce_href="HelpCol.aspx"><span class="item">帮助栏目</span></a></dd> <dd> <a href="HelpColAdd.aspx" mce_href="HelpColAdd.aspx"><span class="item">添加帮助栏目</span></a></dd> <dd> <a href="Helps_list.aspx" mce_href="Helps_list.aspx"><span class="item">帮助管理</span></a></dd> <dd> <a href="HelpsAdd.aspx" mce_href="HelpsAdd.aspx"><span class="item">添加帮助</span></a></dd> <dt id="dt7"><a href="#" mce_href="#" onclick="showmenu(this,7)"><span class="icon erp">友情链接</span></a></dt> <dd> <a href="LinksList.aspx" mce_href="LinksList.aspx"><span class="item">友情链接</span></a></dd> <dd> <a href="linksAdd.aspx" mce_href="linksAdd.aspx"><span class="item">添加友情链接</span></a></dd> <dt id="dt8"><a href="#" mce_href="#" onclick="showmenu(this,8)"><span class="icon erp">站内链接</span></a></dt> <dd> <a href="weblinklist.aspx" mce_href="weblinklist.aspx"><span class="item">站内链接</span></a></dd> <dd> <a href="weblinkAdd.aspx" mce_href="weblinkAdd.aspx"><span class="item">添加站内链接</span></a></dd> </dl> <div class="LineHeight"> </div> </div> <mce:script type="text/javascript"><!-- var dtid = 0; //记录当前显示的ID function showmenu(o,id){ var obj = o.parentNode; var oNode = obj.nextSibling; if(parseInt(dtid) > 0) { hidemenu(dtid,'none'); } if(dtid == id) dtid = 0; else { hidemenu(id); dtid = id; } } function hidemenu(id,none) { var o = document.getElementById("dt"+id); var j = 0 ; //防止死循环 var oNode = o.nextSibling; while(oNode != null && oNode.tagName != "DT" && j<8) { if(oNode.tagName == "DD") { if(none == null) oNode.style.display = ""; else oNode.style.display=none; } j++; oNode = oNode.nextSibling; } } function menuiload() { for(var i = 1;i<9;i++) hidemenu(i,'none'); } setTimeout(menuiload,1000) // --></mce:script>