4.jQuery下拉菜单

最新推荐文章于 2022-09-12 01:08:12 发布

肝JOJO

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量116

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_34620296/article/details/103572330

版权

jQuery 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

效果展示
鼠标经过显示,离开隐藏
在这里插入图片描述
代码如下

    <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            a {
                text-decoration: none;
                font-size: 14px;
            }
            
            .nav {
                margin: 100px;
            }
            
            .nav>li {
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
            
            .nav li a {
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
            
            .nav>li>a:hover {
                background-color: #eee;
            }
            
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
            
            .nav ul li a:hover {
                background-color: #FFF5DA;
            }
        </style>

方法一

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            //鼠标经过
            $(".nav>li").mouseover(function(){             
                $(this).children("ul").show();
            })
            //鼠标离开
            $(".nav>li").mouseout(function(){
                $(this).children("ul").hide();
            })
        })
    </script>

方法二

        $(function(){
            //1.事件切换 (鼠标经过/离开 的复合写法)
            $(".nav>li").hover(function(){
                $(this).children("ul").slideDown();
            },function(){
                $(this).children("ul").slideUp();
            })
        })

方法三

        $(function(){
            //2.事件切换如果只写一个函数,那么鼠标经过和离开都会触发它
            $(".nav>li").hover(function(){
                $(this).children("ul").slideToggle();
            })
        })

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
</body>