js 面向对象的下拉菜单

最新推荐文章于 2024-05-09 00:14:24 发布

dq_095

最新推荐文章于 2024-05-09 00:14:24 发布

阅读量436

点赞数

分类专栏： JavaScript 文章标签： js 面向对象的下拉菜单

本文链接：https://blog.csdn.net/qq_37968920/article/details/82490875

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

js 面向对象的下拉菜单

这里写图片描述

<script>
    // 获取对象     遍历对象操作     显示模块   隐藏模块

    function List(id) {  //  获取对象
        this.id = document.getElementById(id);  // 取 id 值
        this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
    }
    // init 初始化
    List.prototype.init = function () {  // 遍历所有的li 显示和隐藏
        var that = this;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onmouseover = function () {
                that.show(this.children[0]);  //  显示出来
            }
            this.lis[i].onmouseout = function () {
                that.hide(this.children[0]);  // 隐藏起来
            }
        }
    }
    //  显示模块
    List.prototype.show = function (obj) {
        obj.style.display = "block";
    }
    // 隐藏模块
    List.prototype.hide = function (obj) {
        obj.style.display = "none";
    }
    var list = new List("list");  // 实例化了一个对象 叫  list
    list.init();
</script>

整体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .all {
            width: 330px;
            height: 30px;
            background: url(img/bg.jpg) no-repeat;
            margin: 100px auto;
            line-height: 30px;
            text-align: center;
            padding-left: 10px;
            margin-bottom: 0;
        }

        .all ul li {
            width: 100px;
            height: 30px;
            background: url(img/libg.jpg);
            float: left;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
        }

        .all ul ul {
            position: absolute;
            left: 0;
            top: 30px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="all" id="list">
        <ul>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    // 获取对象     遍历对象操作     显示模块   隐藏模块

    function List(id) {  //  获取对象
        this.id = document.getElementById(id);  // 取 id 值
        this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
    }
    // init 初始化
    List.prototype.init = function () {  // 遍历所有的li 显示和隐藏
        var that = this;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onmouseover = function () {
                that.show(this.children[0]);  //  显示出来
            }
            this.lis[i].onmouseout = function () {
                that.hide(this.children[0]);  // 隐藏起来
            }
        }
    }
    //  显示模块
    List.prototype.show = function (obj) {
        obj.style.display = "block";
    }
    // 隐藏模块
    List.prototype.hide = function (obj) {
        obj.style.display = "none";
    }
    var list = new List("list");  // 实例化了一个对象 叫  list
    list.init();
</script>

dq_095

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 面向对象的下拉菜单

js 面向对象的下拉菜单&amp;lt;script&amp;gt; // 获取对象遍历对象操作显示模块隐藏模块 function List(id) { // 获取对象 this.id = document.getElementById(id); // 取 id 值 this.lis = this.id.childre...
复制链接

扫一扫