用function类来写二级导航

最新推荐文章于 2024-05-17 13:52:13 发布

ResidualBridge

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量130

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46410264/article/details/106447282

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习了对象和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;
}

ResidualBridge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用function类来写二级导航

学习了对象和function类后，利用function类建立function高级类来书写二级导航；由于在页面内，二级导航可能不止一个，所以需要将每个导航的id设置为类的参数一、创建function类/* function 的默认值用对象结构的形式书写 */let subNav = function( { id = 'navUl' }={} ){ this.id = id;};二、创建function类的方法/* 方法建议构建在function类的外部，并且需要写在原型上 *
复制链接

扫一扫