简介：纯js制作导航，此导航只需要关系 appendHtml(arrays,bigNavi,0,navigationArr);函数的使用即可。
下面代码粘贴到本地即可使用。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="icon/iconfont.css">
</head>
<body>
<!-- 主内容 -->
<div class="continer">
<!-- 项目标题 -->
<div class="title">
<span class="iconfont icon-jiantoushang"></span>
</div>
<!-- 项目头部 -->
<div class="top">
</div>
<!-- 左侧导航栏 -->
<div class="left">
<div class="middleman">
<div class="hrefs">
<ul id="bigNavigation">
<!-- 导航 -->
</ul>
</div>
</div>
</div>
<!-- 点击导航栏要显示的 -->
<div class="main">
<iframe src="" name="iframe_a"></iframe>
</div>
</div>
</body>
<script src="icon/iconfont.js"></script>
<script>
// 画面加载完成
window.onload=function(){
// 数据存放
let arrays=[
{
name:"一级导航1",
children:[
{
name:"二级导航1",
children:[
{
name:"三级导航",
}
]
},
{
name:"二级导航2",
children:[
{
name:"三级导航"
},
{
name:"三级导航"
},
{
name:"三级导航"
}
]
},
]
},
{
name:"一级导航2",
children:[
{
name:"二级导航1",
children:[
{
name:"三级导航",
}
]
},
{
name:"二级导航2",
children:[
{
name:"三级导航",
children:[
{
name:"四级导航",
children:[
{name:"五级导航"},
{name:"五级导航"},
{name:"五级导航"},
]
},
{
name:"四级导航"
}
]
},
{
name:"三级导航"
},
{
name:"三级导航"
}
]
},
]
}
];
let timer;//执行一次
//js获取大导航
let bigNavi=document.getElementById("bigNavigation");
// 渲染ul 参数解释(arr：导航数据，element：UL导航顶级标签，pCssNum：指定css的数字,navigationArr:数组保存自定义的css样式)
function appendHtml(arr,element,pCssNum,navigationArr){
//cssNum 代表导航级数
let cssNum=0;
if(pCssNum) cssNum = pCssNum;
let cssName=navigationArr[cssNum];
cssNum++;
for(let i=0;i<arr.length;i++){
// 添加li 标签
var uli=document.createElement("li");
uli.innerText=arr[i].name;
uli.className=cssName;
// 体现层级感
if(arr[i].marginLeft){
initCss(uli);
}
element.appendChild(uli);
// 监听元素的点击事件
uli.onclick=function(event){
//阻止冒泡机制,阻止子元素事件向父元素触发
event.stopPropagation();
if(this.children && this.children.length){
// 子元素扩展，父元素也要扩展
let h=0;
let f=arr[i].flag;
for(let j=0;j<this.children.length;j++){
if(!f){
this.children[j].style.height="50px";
}else{
//子和孙子节点全部为0px
let cna=childNodeAll(this);
for(let k=0;k<cna.length;k++){
cna[k].style.height="0px";
}
}
// 最后一次更改闭合状态
if(j == this.children.length-1){
arr[i].flag=!f;
//传递子数组
arrFlagFalse(arr[i].children)
}
}
if(this.parentNode.tagName != "UL"){
//根据自己子列改变自身高度
listener(this);
}
}
}
if(arr[i].children){
//有子类
arr[i].flag=false;//表示闭合状态
arr[i].children.forEach(item => {
item.marginLeft=1;
});
appendHtml(arr[i].children,uli,cssNum,navigationArr);
}
}
}
//核心
// 导航样式集合样式集合(你的导航有几个就填几个)
let navigationArr=['navigationOne','navigationTwo','navigationThree','navigationFour','navigationFour'];
//初始化导航
appendHtml(arrays,bigNavi,0,navigationArr);
}
//元素初始化样式
function initCss(element){
//基础设置
element.style.overflow="hidden";
element.style.transition="height 0.5s";
element.style.height="0px";
// 行高
element.style.lineHeight='50px';
}
//获取所有子节点包括孙子节点
function childNodeAll(element,nodes){
let nodeAll=[];
if(nodes) nodeAll=nodes;
if(element.children && element.children.length){
for(let i=0;i<element.children.length;i++){
nodeAll.push(element.children[i]);
childNodeAll(element.children[i],nodeAll);
}
}
return nodeAll;
}
// 多级:监控子类高度变化 (默认高度20px)
function listener(event){
if(!event) return;
if(event.tagName == 'UL' || event.parentNode.tagName == 'UL' ) return
if(event && event.children && event.children.length){
//逻辑 我加上子标签的高度
let itself=50;
for(let i=0; i< event.children.length;i++){
itself+=parseInt(event.children[i].style.height);
}
event.style.height=`${itself}px`
}
listener(event.parentNode);
}
//如果关闭的是父级的父级，全都变成 false (合并状态)
function arrFlagFalse(arrChildren) {
if(!arrChildren) return;
for(let i=0;i<arrChildren.length;i++){
arrChildren[i].flag=false;
arrFlagFalse(arrChildren[i].children)
}
}
</script>
</html>
css部分
body{
background-color:#CCFFFF;
margin: 0px;
}
.continer{
font-family: 'KaiTi', Courier, monospace;
font-size: 1rem;
}
.continer div{
position: absolute;
border :1px solid rebeccapurple;
}
.continer .title{
left: 0;
top: 0;
width: 13%;
height: 10%;
}
/* 头块 */
.continer .top{
left: 13%;
top: 0;
width: 86.86%;
height: 10%;
}
/* 左侧导航栏 */
.continer .left{
left: 0;
top: 10%;
width: 12.1%;
height: 86.7%;
padding: .7rem 0 .7rem .7rem ;
overflow: hidden;
}
.continer .left .middleman {
width: 90%;
height:95%;
overflow: auto;
}
/* 作用隐藏滚动条 适用于 Chrome Safari 浏览器 */
.continer .left .middleman::-webkit-scrollbar{
display: none;
}
.continer .left .middleman .hrefs{
width: 90%;
border: 1px solid red;
}
.continer .left .middleman .hrefs ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
/* .continer .left .hrefs ul li :hover{
background-color: aqua;
} */
.continer .main{
left: 13%;
top: 10%;
width: 86.86%;
height: 89.7%;
}
.continer .main iframe{
width: 99.6%;
height: 99.6%;
}
/* 导航样式 */
/* 导航高度不要再css样式中添加，会被style覆盖 */
.navigationOne{
background-color: red;
font-size: 22px;
text-align: left;
line-height: 50px;
}
.navigationTwo{
background-color: rgb(0, 17, 255);
font-size: 19px;
text-align: center;
}
.navigationThree{
background-color: rgb(0, 255, 213);
font-size: 15px;
}
.navigationFour{
background-color: rgb(187, 26, 152);
font-size: 13px;
}
注意：程序中没提供更改高度的方式，可以自行更改。
铭记：时刻保持一个学习的心。
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
