tx6-面向对象版的下拉菜单

最新推荐文章于 2020-04-21 21:45:02 发布

python基础教程

最新推荐文章于 2020-04-21 21:45:02 发布

阅读量448

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52994085

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .all{
            width: 330px;
            height: 30px;
            background: url("images/bg.jpg") no-repeat;
            margin: 100px auto;
            line-height: 30px;
            text-align: center;
        }
        .all ul li{
            width: 100px;
            height: 30px;
            background: url("images/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
    }
    //遍历操作对象
    List.prototype.init = function () { //遍历所有的li 显示和隐藏
        var that = this;
        for(var i=0;i<this.lis.length;i++){
            this.lis.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>

python基础教程

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; }
复制链接

扫一扫