利用js中prototype的知识写下拉菜单

最新推荐文章于 2023-10-07 15:03:47 发布

diligentkong

最新推荐文章于 2023-10-07 15:03:47 发布

阅读量460

点赞数

分类专栏： JS实例效果文章标签： prototype javascript

本文链接：https://blog.csdn.net/diligentkong/article/details/55272345

版权

JS实例效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习了js中的prototype知识点，利用其写了个下拉菜单实例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .box{
                width: 330px;
                height: 30px;
                background: url(img/bg.jpg) no-repeat;
                margin: 100px auto;
                padding-left: 10px;
                margin-bottom: 0;
            }
            .box ul li{
                width: 100px;
                height: 30px;
                background: url(img/libg.jpg) no-repeat;
                float: left;
                margin-right: 10px;
                position: relative;
                cursor: pointer;
                text-align: center;
                line-height: 30px;
            }
            .box ul ul{
                position: absolute;
                left: 0;
                top: 30px;
                display: none;
            }
        </style>
        <script>
            window.onload = function(){
                // 获取对象  遍历对象操作    显示模块  隐藏模块

                // 获取对象
                function List(id){
                    this.id =  document.getElementById(id);// 获取id值
                    this.lis = this.id.children[0].children;// 获取一级菜单所有的li
                }

                // 遍历所有的li  显示和隐藏二级菜单   初始化函数 init
                List.prototype.init = function(){
                    var that = this;//  此处this指向List ，为避免与下面的冲突，把this赋值给that
                    for (var i = 0; i < this.lis.length;i++) {
                        this.lis[i].onmouseover = function(){
                            that.show(this.children[0]); // 显示出来
                            // this.children[0]  此处的this指向事件的调用者 lis[i],表示第几个一级菜单li
                        }
                        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";
                }

                // 实例化一个对象 list
                var list = new List("list");
                list.init();
            }
        </script>
    </head>
    <body>
        <div class="box" id="list">
            <ul>
                <li>一级菜单
                    <ul>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单
                    <ul>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
                <li>一级菜单
                    <ul>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>