本文介绍如何使用原生 JavaScript 实现一个简单的折叠菜单效果。通过监听点击事件，利用 innerText 判断展开状态，并动态修改 ul 元素的 display 属性来控制子菜单的显示与隐藏，实现点击加号展开、减号收起的功能。
JavaScript 实现简易折叠菜单（TreeMenu）
分享一个近期学习到的前端小功能。
实现类似 TreeMenu 的折叠菜单控件效果。
直接查看具体代码实现。
JavaScript 核心逻辑如下：
<script language="javascript">
function control() { // 定义控制函数
if (sMenus3.innerHTML == "+") { // 判断当前是否为展开状态
ulMenu3.style.display = "block"; // 若为加号，则显示菜单
sMenus3.innerText = "-"; // 展开后将图标文本改为减号
}
} else {
ulMenu3.style.display = "none"; // 若为减号，则隐藏菜单
sMenus3.innerText = "+"; // 收起后将图标文本改回加号
}
}
}</script>HTML 结构代码：
主要注意 ID 的对应关系，确保 HTML 元素与 JavaScript 中的变量名一致。
HTML 页面结构如下：
<body>
<span id="sMenus3" style=" border:1px solid #00000; color:Blue;cursor:hand ;" onclick="control()">-</span>无网站状态<br/>
<ul id="ulMenu3">
<li><a href="http://www.baidu.com" target="_blank">百度</a> </li>
<li><a href="http://www.baidu.com" target="_parent">百度</a></li>
<li><a href="http://www.baidu.com" target="_blank">还是百度</a></li>
</ul>
</body>