下拉菜单动画

最新推荐文章于 2022-12-22 00:02:10 发布

没头脑不思考

最新推荐文章于 2022-12-22 00:02:10 发布

阅读量406

点赞数 1

分类专栏： JQ 文章标签： jquery

本文链接：https://blog.csdn.net/lmhnba/article/details/108985232

版权

JQ 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

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

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
        }

        .wrap li {
            background-color: #BFA;
        }

        .wrap>ul>li {
            float: left;
            margin-right: 5px;
            position: relative;
        }

        .wrap>ul>li>ul>li{
            background-color: chartreuse;
        }
        .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-3.5.1.js"></script>
    <script>
        $(function () {
            //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
            //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

            //获取一级菜单li的方式:
            //$('li');//不行
            //$('ul>li');//不行
            //$('.wrap li');//不行
            //$('.wrap>ul>li')//可行的.

            //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
            $('.wrap>ul>li').mouseover(function () {
                //console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.
                // $(this).children('ul').css('display','block');//显示就是更改display属性为block.
                $(this).children('ul').stop().slideDown(200);//show()方法本质上还是更新display属性为block.改为滑出，时间200ms
            });

            //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
            $('.wrap>ul>li').mouseout(function () {
                $(this).children('ul').stop().slideUp(200); //hide()方法本质上还是更新display属性为none，改为滑入时间200ms
            });

            //3.思考题:
            //为什么不给一级菜单a标签设置鼠标移入和离开事件?
            //因为这样的话,选不到二级菜单.
            // $('.wrap>ul>li>a').mouseover(function () {
            //   $(this).siblings('ul').show();
            // });
            // $('.wrap>ul>li>a').mouseout(function () {
            //   $(this).siblings('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>

没头脑不思考

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单动画

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

扫一扫