本文介绍一个基于原生JavaScript和CSS实现的多级折叠菜单示例。该方案无需引入外部库或图片资源，通过简单的DOM操作控制显示与隐藏，展示了折叠菜单的核心逻辑，适合初学者参考学习。
纯JS与CSS实现的多级折叠菜单
本文分享一个使用JavaScript和CSS实现的可折叠多级菜单效果，供读者参考。
这是一个纯前端实现的多级折叠菜单，支持展开与合拢操作。该示例未引用任何外部文件，也未使用图片资源。尽管实现较为简单且细节尚显粗糙，但已清晰展示了折叠菜单的核心逻辑。对于正在研究此类菜单功能的开发者而言，此示例具有参考价值，建议深入研读。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/
具体代码如下：
<!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>
<title>折叠菜单</title>
<style>
#side_nav ul{display:none}
</style>
</head>
<body>
<ul id="side_nav">
<li><span>菜单1</span>
<ul>
<li><a href="#">菜单1-0</a></li>
<li><a href="#">菜单1-1</a></li>
</ul>
</li>
<li><span>菜单2</span>
<ul>
<li><a href="#">菜单2-0</a></li>
<li><a href="#">菜单2-1</a></li>
</ul>
</li>
<li><span>菜单3</span>
<ul>
<li><a href="#">菜单3-0</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
<!--
(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程序设计有所帮助。