您的位置:首页 > Web前端 > JavaScript

js控制dd的隐藏与显示

2010-01-18 21:23 459 查看
应朋友要求用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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: