简易JavaScript下拉菜单实现-优快云博客

本文介绍了一种使用纯JavaScript实现的简易下拉菜单效果，该菜单具备良好的交互体验及快速响应特性。通过简单的HTML结构配合JavaScript代码，可以轻松创建多级下拉菜单，并且每个菜单项都可以展开或收起。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最简单实用的下拉菜单，效果非常好的，速度也快，酷 [ 2005-07-19 | 作者：coli |

插入到<body></body>间的代码:

<script language="JavaScript">

</script>
<a href="#" onclick="showLay('Layer1')"><span id="spLayer1">+</span>刀具</a><br>
<div id="Layer1" style="display:none;">
|-<a href="#" onclick="showLay('Layer11')"><span id="spLayer11">+</span>手术刀</a><br>

  <div id="Layer11" style="display:none;">
   | |-A型号手术刀<br>
   | |-B<br>
   | |-C<br>
</div>
|<br>
  |-<a href="#" onclick="showLay('Layer12')"><span id="spLayer12">+</span>镊子</a><br>
<div id="Layer12" style="display:none;">
   | |-AA<br>
   | |-BB<br>
</div>
   | <a href="#" onclick="showLay('Layer13')"><br>
  |-<span id="spLayer13">+</span>钳子</a><br>
<div id="Layer13" style="display:none;">
   | |-CC<br>
    | |-DD<br>
    | <br>
</div>
</div>
<a href="#" onclick="showLay('Layer2')"><span id="spLayer2">+</span>电子仪器</a>
<div id="Layer2" style="display:none;">
|-透视仪<br>
|-验血仪器
</div>