【前端实例】JavaScript原生实现二级导航

最新推荐文章于 2021-06-03 14:21:47 发布

LaoYe - IT

最新推荐文章于 2021-06-03 14:21:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript 二级导航

本文链接：https://blog.youkuaiyun.com/Rao_Limon/article/details/88043150

前端专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的手风琴式导航栏，通过简单的代码展示了如何创建可展开和折叠的一级和二级导航菜单。点击一级导航项时，会显示或隐藏其子导航项。

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

1、效果

2、代码

【HTML代码】
<li class="navList">
	<div class="navHead">
		<i class="navIcon">&#xec1d;</i>
		<span>一级导航</span>
	</div>
	<dd class="navChild">
		<dl class="navItem">二级导航</dl>
		<dl class="navItem">二级导航</dl>
		<dl class="navItem">二级导航</dl>
	</dd>
</li>

【JavaScript代码】
function navEvent(){
	var classList,parentNode;
	var navHead = document.getElementsByClassName("navHead");
	for(i=0;i<navHead.length;i++){
		navHead[i].onclick = function(){
			// 判断当前是否是展开状态，如果不是则添加navActive选中类名；如果是隐藏子导航容器
			parentNode = this.parentNode;
			classList = parentNode.className.indexOf("navActive");
			if(classList > -1){
				parentNode.className = parentNode.className.replace(" navActive","");
			}else{
				parentNode.className = parentNode.className + " navActive";
			}
		}
	}
}