當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS三级可折叠菜单

發布時間：2025/4/5 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS三级可折叠菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

.ASPX代碼

Code
<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="NavigateMenu.aspx.cs"?Inherits="NavigateMenu"?%>

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head?runat="server">
????<title>無標題頁</title>
???<script?type="text/javascript"?src="JScript.js"?></script>
???<style?type="text/css">
*{
?margin:?0px;
?padding:?0px;
?border:0px;
}
#nav{
?width:?600px;
?margin:?0px;
?padding:?0px;
?font-size:?14px;
?line-height:?30px;
}
#nav?li{
?width:?180px;
?padding-left:?20px;
?padding-bottom:?1px;
?list-style-image:?none;
?list-style-type:?none;
?background-color:?#FFFFFF;
}
#nav?a{
?padding-left:?20px;
?background-color:?#BFBFBF;
?display:?block;
?text-decoration:?none;
}
#nav?a:hover?{
?background-color:?#FF9175;
}
#nav?li?ul{
?padding-top:?1px;
?list-style-image:?none;
?list-style-type:?none;
}
#nav?li?li{
?padding-left:?0px;
}
#nav?ul?a{
?background-color:?#EBEBEB;
}
.cx?{
?display:none;
?visibility:hidden;
}
.ex?{
?display:inherit;
?visibility:inherit;
}
</style>
<script?type="text/javascript"?>

??window.onload=function(){
??statUp();
??}
</script>
</head>
<body>
????<form?id="form1"?runat="server">
<div?id="Parent">
<ul?id="nav">
<li><a?href="javascript:void(0);"?onclick="doMenu(this,'1')">菜單1</a>
?<ul>
??<li><a?href="javascript:void(0);">菜單1_1</a></li>
??<li><a?href="javascript:void(0);">菜單1_2</a></li>
?</ul>
</li>
<li><a?href="javascript:void(0);"?onclick="doMenu(this,'1')">菜單2</a>
?<ul>
??<li><a?href="javascript:void(0);"?onclick="doMenu(this,'2')"?>菜單2_1</a>
??<ul>
??<li>菜單2_1_1</li>
??<li>菜單2_1_2</li>
??</ul>
??</li>
??<li><a?href="javascript:void(0);"?onclick="doMenu(this,'2')">菜單2_2</a>
????<ul>
??<li>菜單2_2_1</li>
??</ul>
??</li>
?</ul>
</li>
</ul>
</div>
????</form>
</body>
</html>

js文件代碼

Code
function?doMenu(obj,strDeep){
?var?items=obj.parentNode.getElementsByTagName("ul");?//獲取a?對象你節點li?下包含的?所有ul集合
?var?itmUl;
?var?deeps=strDeep;??//strDeep?為當前菜單的級數
?if(items.length>0){
??itmUl=items[0];
??alert(itmUl);
?}

?if(itmUl.className!="ex"){
??cxAll();//當前節點為關閉狀態時,先執行關閉所有ul子菜單
??if(deeps=='2'){??//若要展開三級菜單當,還要將其二級父菜單展開
??itmUl.parentNode.parentNode.className="ex";
??}
??itmUl.className="ex";?//展開下級菜單
?}else{
??itmUl.className="cx";
?}
}
function?statUp(){
?cxAll();
?var?ulDom=document.getElementById("nav");
?var?items=ulDom.getElementsByTagName("ul");
}
function?cxAll(){
?var?ulDom=document.getElementById("nav");
?var?items=ulDom.getElementsByTagName("ul");
?for?(var?i=0;i<items.length;i++)
?{
??items[i].className="cx";
?}

轉載于:https://www.cnblogs.com/yinhaiming/archive/2009/02/13/1389993.html

總結

以上是生活随笔為你收集整理的JS三级可折叠菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。