JavaScript 实现简易折叠菜单（TreeMenu）

JavaScript 实现简易折叠菜单（TreeMenu）

分享一个近期学习到的前端小功能。

实现类似 TreeMenu 的折叠菜单控件效果。

直接查看具体代码实现。

 
<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 中的变量名一致。

 
<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>