关于js实现二级导航栏的总结

最新推荐文章于 2022-12-25 19:26:32 发布

安静宅男爱蓝猫

最新推荐文章于 2022-12-25 19:26:32 发布

阅读量2.7k

点赞数 2

分类专栏： js案例

@By-蓝猫

本文链接：https://blog.csdn.net/qq_43355930/article/details/104456990

版权

js案例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

标题关于js实现二级导航栏的总结

此篇为个人实现后的个人总结
1.所谓二级导航栏，就是在ul li 标签中嵌套一个ul li标签
在这里插入图片描述但是THML+CSS实现不了导航的隐藏与显示，因此要靠js来实现

当我点击的时候，二级导航才显示出来，当我点击另一个的时候，隐藏其他的，再把当前我点击的显示出来

因此用JavaScript中的onclick属性放在第一级的li标签中

在这里插入图片描述然后通过js获取下一级ul的 id 遍历它所属的li标签并改变它的style属性就可以

function leo(n){
var navUi = document.getElementById("m"+n);

if(navUi.style.display != "block"){
	for(var i=0;i<=navUi.length;i++){
		document.getElementById("m"+i).style.display = "none";
	}
	navUi.style.display = "block";
}else{
	navUi.style.display = "none";
}

这是本案案例：
https://download.csdn.net/download/qq_43355930/12184706