本文介绍利用JavaScript实现左侧多级菜单的动态展开与隐藏功能。通过简单的DOM样式切换实现基础交互，并针对ASP环境下页面跳转导致菜单状态丢失的问题，提出基于URL传值与InStr函数判断的解决方案，确保多级分类在刷新后仍能保持正确的展开状态。
基础多级菜单HTML结构
HTML结构代码如下：
<div><a onclick="news_pro('1.1')">1</a></div>
<div id="1.1" >
<div> <a onclick="news_pro('1.1.1')">1.1</a></div>
</div>上述结构形成了两级分类。点击父级元素时，通过JS控制子级菜单的显示与隐藏。核心JS代码仅有一行：
JavaScript动态展开逻辑
具体实现代码如下：
function news_pro(o)
{
var obj=document.getElementById(o)
obj.style.display==""? obj.style.display="none": obj.style.display="";
} 逻辑确实简洁，但为了支持更深层级的导航，我们需要继续添加三级和四级子菜单。
多层级菜单结构扩展
扩展后的HTML结构代码如下：
<div><a onclick="news_pro('1.1')">1</a></div>
<div id="1.1">
<div> <a onclick="news_pro('1.1.1')">1.1</a></div>
<div id="1.1.1" >
<div> <A onclick="news_pro('1.1.1.1')">1.1.1</a></div>
<div id="1.1.1.1">
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1.1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
</div>js代码还是只有那一行，so easy吧，可是真的就这样完了吗？答案是NONONO！当你点其中的一级时，页面发生跳转，这是我们想要的，但是左边的菜单却又变成了原来的样子，并没有保存我刚才点击的状态，那该怎么办呢？因为同事是要用到ASP里去，好像没有视图状态这个东东，那用session保存吗？好像能行得通，但是如果你点击快一点，就发现菜单有时候点几次都会不同，根本反应不过来或是session丢失了，最后不巧我发现我的命名很有意思，一级是1，二级是1.1三级是1.1.1，四级是1.1.1.1，想到什么？想到了数据库设计多级类别的查询吧！？好像discuz里面的类别就是这么设计的。它查询也很快，那我也给它来个快速的，灵机一动，就so happy了。
具体实现采用URL传值机制，代码如下：
基于URL传值的状态保持方案
完整代码示例如下：
<div><a onclick="news_pro('1.1')" href="?id=1.1">1</a></div>
<div id="1.1" <%If InStr(request.querystring("id"),"1.1")=0 Then response.write style='display:none;'%>>
<div> <a onclick="news_pro('1.1.1')" href="?id=1.1.1">1.1</a></div>
<div id="1.1.1" style="display:none;" <%If InStr(request.querystring("id"),"1.1.1")=0 Then response.write style='display:none;'%>>
<div> <A onclick="news_pro('1.1.1.1')" href="?id=1.1.1.1">1.1.1</a></div>
<div id="1.1.1.1" <%If InStr(request.querystring("id"),"1.1.1.1")=0 Then response.write style='display:none;'%>>
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1.1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
</div>
<div><a >2</a></div>
<div><a >3</a></div>该方案在ASP或ASP.NET环境中均适用。虽然纯JS也能实现类似效果，但结合ASP服务端判断更为直接。功能现已完整实现，欢迎分享其他优化方法，共同学习进步。