jquery 下拉弹出菜单

最新推荐文章于 2024-02-21 14:15:55 发布

约德尔蒙

最新推荐文章于 2024-02-21 14:15:55 发布

阅读量840

点赞数

分类专栏： JQuery（以及源码解读）

本文链接：https://blog.csdn.net/gyq04551/article/details/53416102

版权

JQuery（以及源码解读）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!doctype html>


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            background: blanchedalmond;
        }
        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
        }
        .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="js/jquery.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>

</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 下拉弹出菜单

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *
复制链接

扫一扫