下拉菜单案例（children+this）

作者: 琪33 | 来源:发表于2018-04-26 16:11 被阅读0次

下拉菜单案例（children+this）
下拉菜单案例（children+this）
案例：下拉菜单
第十九谈：下拉菜单
简易下拉菜单
Bootstrap - 菜单2
2019-04-11 下拉菜单（2）
Vue中判断点击是否在组件外
【Excel篇】自动更新下拉菜单
css学习第五天

  <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }
        .wrap li{
            background-image: url(imgs/libg.jpg);
        }
        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }
        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () {
                //这个位置用到了this.
//                console.log(this);  //jquery对象绑定的时间中的this也代指js中的dom对象。！！！
                //让this中的ul显示出来。
//                this.children[1].style.display = "block";
                //把js的dom对象包装为jquery对象，然后用jquery方法操作
                $(this).children("ul").show();
            });

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                //这个位置用到了this.
//                console.log(this);  //jquery对象绑定的时间中的this也代指js中的dom对象。！！！
                //让this中的ul显示出来。
//                this.children[1].style.display = "none";
                //把js的dom对象包装为jquery对象，然后用jquery方法操作
                $(this).children("ul").hide();
            });
        });
    </script>

</head>
<body>
    <div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>