树状导航栏

最新推荐文章于 2025-05-24 13:11:17 发布

luoruihua2017

最新推荐文章于 2025-05-24 13:11:17 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/luoruihua2017/article/details/81003844

这篇博客分享了一种使用纯JavaScript实现树状导航栏的方法，通过一个简单的函数即可完成，无需依赖复杂的Ztree等插件。示例代码中展示了如何为每个子节点添加点击事件并阻止事件冒泡。

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

是很常用简单的js代码，但用多了Ztree等插件实现树状导航栏，就一点乐趣都没有了。

一个函数即可搞定，话不多说上代码：

window.onload = function() {
var tree = document.getElementById("tree");
var lis = tree.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {

(function(a) {

//为每一个子树增加一个点击事件。

lis[a].onclick = function() {

//一定要取消冒泡机制，否则点到子树会触发每一个上层的树

event.stopPropagation();
if(typeof this.getElementsByTagName("ul") !== null) {
var ul_first = this.getElementsByTagName("ul")[0];
if(ul_first.style.display == "block")
ul_first.style.display = "none";
else
ul_first.style.display = "block";
}
};
})(i);
}

};

H5代码如下：

</head>
<body>
<ul id="tree">
<li>收入
<ul>
<li>出账收入
<ul>
<li>语音收入
<ul>
<li>本地通话收入</li><li>长途通话收入</li>
</ul>
</li>
<li>数据业务收入
<ul>
<li>飞信</li><li>彩铃</li><li>短信</li><li>彩信</li><li>GPRS</li><li>WLAN</li>
</ul>
</li>
<li>流量业务收入
<ul>
<li>GPRS业务收入</li><li>WLAN业务收入</li>
</ul>
</li>
<li>增值业务收入
<ul>
<li>语音增值业务收入</li>
</ul>
</li>
<li>校园产品收入
<ul>
<li>V网收入</li>
</ul>
</li>
<li>固定费收入
<ul>
<li>月租费</li>
</ul>
</li>
<li>ARPU
</li>
</ul>
</li>
<li>缴费
<ul>
<li>当期户均余额</li><li>日累计人均预存款</li><li>当日人均预存款</li>
</ul>
</li>
</ul>
</li>
<li>用户
<ul>
<li>到达
<ul>
<li>到达用户数
<ul>
<li>移动</li><li>电信C网</li><li>联通G网</li>
</ul>
</li>
</ul>
</li>
<li>新增
<ul>
<li>新增用户数
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
<li>新增市场份额
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
</ul>
</li>
<li>净增
<ul>
<li>净增用户数
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
<li>净增市场份额
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>业务量
<ul>
<li>话音业务
<ul>
<li>本地通话
<ul>
<li>市话主叫时长</li><li>市话被叫时长</li>
</ul>
</li>
<li>长途通话
<ul>
<li>长途主叫时长</li><li>长途被叫时长</li>
</ul>
</li>
<li>漫游通话
<ul>
<li>省内漫游主叫时长</li><li>省内漫游被叫时长</li><li>省际漫游主叫时长</li><li>省际漫游被叫时长</li>
</ul>
</li>
</ul>
</li>
<li>数据业务
<ul>
<li>飞信活跃用户数</li>
<li>彩铃订购用户数</li>
<li>短信条数</li>
<li>彩信条数</li>
<li>GPRS流量</li>
<li>WLAN时长</li>
</ul>
</li>
<li>流量业务
<ul>
<li>GPRS业务
<ul>
<li>手机上网用户数</li><li>手机上网普及率</li><li>T网手机上网用户数</li><li>GPRS计费流量</li><li>T网计费流量</li><li>T网计费流量占比</li>
</ul>
</li>
<li>wlan业务
<ul>
<li>WLAN时长</li>
</ul>
</li>
</ul>
</li>
<li>校园产品
<ul>
<li>校园v网
<ul>
<li>校园V网用户数</li><li>校园V网通话用户数</li><li>校园V网普及率</li><li>V网通话时长</li><li>V网通话次数</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>市场竞争(高校)
<ul>
<li>到达
<ul>
<li>到达用户数
<ul>
<li>移动</li><li>电信C网</li><li>联通G网</li>
</ul>
</li>
<li>到达市场份额
<ul>
<li>移动</li><li>电信C网</li><li>联通G网</li>
</ul>
</li>
</ul>
</li>
<li>新增
<ul>
<li>新增用户数
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
<li>新增市场份额
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
</ul>
</li>
<li>净增
<ul>
<li>净增用户数
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
<li>净增市场份额
<ul>
<li>移动</li><li>联通</li><li>电信</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>