学习了对象和function类后,利用function类 建立function高级类来书写二级导航;
由于在页面内,二级导航可能不止一个,所以需要将每个导航的id设置为类的参数
效果图:
一、创建function类
/* function 的默认值用对象结构的形式书写 */
let subNav = function( { id = 'navUl' }={} ){
this.id = id;
};
二、创建function类的方法
/* 方法建议构建在function类的外部,并且需要写在原型上 */
subNav.prototype.showSubnav = function(){
let ul = document.getElementById( this.id ); //用参数代替获取的id
let lis = ul.children;
for( let i of lis ){ //用for-of进行数据的遍历
i.addEventListener("mouseenter",function(){
let subUl = i.children[1];
if( !subUl ){
return false;
}
subUl.style.display = "block";
let subLis = subUl.children;
for( let x of subLis ){
x.addEventListener("mouseenter",function(){
x.style.backgroundColor = "#ffbc46";
x.style.color = "#00ff72";
});
x.addEventListener("mouseleave",function(){
x.style.backgroundColor = "#c47fff";
x.style.color = "#fff";
});
}
i.style.backgroundColor = "#99cc33";
i.style.color = "red";
});
i.addEventListener("mouseleave",function(){
let subUl = i.children[1];
if( !subUl ){
return false;
}
subUl.style.display = "none";
let subLis = subUl.children;
for( let x of subLis ){
x.addEventListener("mouseenter",function(){
x.style.backgroundColor = "#ffbc46";
x.style.color = "#00ff72";
});
x.addEventListener("mouseleave",function(){
x.style.backgroundColor = "#c47fff";
x.style.color = "#fff";
});
}
i.style.backgroundColor = "#00a6f7";
i.style.color = "#fff";
});
}
};
三、创建新的对象,进行调用方法
let mysubNAv = new subNav({ //navUl 页面内的导航id
id : "navUl"
});
mysubNAv.showSubnav();
HTML文件:
<body>
<div class="nav">
<ul id="navUl">
<li><a href="#">标题1</a>
<ul class="subnav">
<li><a href="#">二级标题1</a></li>
<li><a href="#">二级标题2</a></li>
<li><a href="#">二级标题3</a></li>
<li><a href="#">二级标题4</a></li>
</ul>
</li>
<li><a href="#">标题2</a>
<ul class="subnav">
<li><a href="#">二级标题1</a></li>
<li><a href="#">二级标题2</a></li>
<li><a href="#">二级标题3</a></li>
<li><a href="#">二级标题4</a></li>
</ul>
</li>
<li><a href="#">标题3</a>
<ul class="subnav">
<li><a href="#">二级标题1</a></li>
<li><a href="#">二级标题2</a></li>
<li><a href="#">二级标题3</a></li>
<li><a href="#">二级标题4</a></li>
</ul>
</li>
<li><a href="#">标题4</a>
<ul class="subnav">
<li><a href="#">二级标题1</a></li>
<li><a href="#">二级标题2</a></li>
<li><a href="#">二级标题3</a></li>
<li><a href="#">二级标题4</a></li>
</ul>
</li>
</ul>
</div>
</body>
样式文件:
*{
padding: 0;
margin: 0;
}
ul,li,li{
list-style: none;
}
a{
list-style: none;
text-decoration: none;
color: inherit;
display: block;
width: 100%;
height: 50px;
}
.nav>ul{
width: 800px;
height: 50px;
margin: auto;
display: flex;
background: #00a6f7;
}
.nav>ul>li{
flex: 1;
text-align: center;
line-height: 50px;
color: #fff;
}
.subnav{
width: 100%;
background: #c47fff;
display: none;
color: #fff;
}
.subnav>li{
border-top: 1px #f7f7f7 solid;
}