本文介绍如何使用原生JavaScript实现点击一级菜单展开或折叠二级菜单的功能。核心逻辑是通过判断子菜单的display属性值（block或none），动态切换其显示状态。文章提供了两种场景的代码示例：默认隐藏需点击展开，以及默认显示需点击隐藏，并指出一级菜单li标签内避免使用a标签以确保交互正常。
原生JS实现二级菜单展开折叠功能
尽管jQuery等库功能强大，但在实际开发中常受限于项目规范或性能考量，例如禁止使用插件以节省资源（如100KB以上的体积对小型项目影响显著）。针对此类限制，本文分享一个使用原生JavaScript实现点击展开二级菜单的解决方案，该方案参考了现有案例并进行了补充优化。
默认隐藏菜单的实现逻辑
若页面加载时二级菜单默认隐藏，需通过点击触发显示，再次点击则隐藏。实现此功能的关键在于控制CSS的display属性：显示时设为block，隐藏时设为none。同时，JavaScript逻辑需包含条件判断，根据当前菜单的显示状态（block或none）来决定切换后的目标状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#sub_menu_1,#sub_menu_2{
display: none;
}
ul li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li onclick = "f('sub_menu_1')">一级菜单1
<ul id="sub_menu_1">
<li>二级餐单1</li>
<li>二级餐单1</li>
<li>二级餐单1</li>
<li>二级餐单1</li>
</ul>
</li>
<li onclick="f('sub_menu_2')">一级菜单2
<ul id="sub_menu_2">
<li>二级菜单2</li>
<li>二级菜单2</li>
<li>二级菜单2</li>
<li>二级菜单2</li>
</ul>
</li>
<li>一级餐单3</li>
</ul>
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "block")
sub_menu.style.display = "none";
else
sub_menu.style.display = "block";
}
</script>
</body>
</html>
默认显示菜单的适配与注意事项
需注意，一级菜单的li元素内部不应包含a标签，否则可能导致点击事件失效。若需求调整为页面加载时二级菜单默认显示，点击时隐藏，则需移除CSS中子菜单的display:none样式，并相应调整JavaScript逻辑以匹配新的交互行为。
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "none")
sub_menu.style.display = "block";
else
sub_menu.style.display = "none";
}
</script>
交互体验优化建议
在实现过程中，若逻辑处理不当，可能导致用户需要点击两次才能看到预期的菜单展开效果。因此，需仔细检查条件判断逻辑，确保状态切换的即时性和准确性。
以上内容提供了基于原生JavaScript实现二级菜单展开与折叠的基本思路与代码示例，旨在帮助开发者在受限环境下快速实现交互功能。