JS+CSS实现的简单折叠展开多级菜单效果

更新时间：2026-05-11 00:44:23作者：fang

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下：

这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究折叠菜单的朋友们，这一个小例子可能正是你需要的，好好研究一下吧。

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

#side_nav ul{display:none}

</style>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

<!--

(function(){

var navWrap=document.getElementById("side_nav");

var nav1s=navWrap.getElementsByTagName("span");

var nav2s=navWrap.getElementsByTagName("ul");

for(var i=0,len=nav1s.length;i<len;i++){

nav1s[i].onclick=(function(i){

return function(){

for(var j=0;j<len;j++){

nav2s[j].style.display="none";

}

nav2s[i].style.display="block";

}

})(i)

}

})()

//-->

</script>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

手游推荐