b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单

快意人生大社畜

已于 2023-07-06 11:36:04 修改

阅读量1.7k

点赞数 5

分类专栏： jQuery 文章标签： javascript jquery 前端

于 2022-10-03 18:41:33 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/127154793

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery中：【使用jquery,记得要引入jquery文件】

用到的重点代码/原理：

1.原案例版本（不简洁，效果较为僵硬）

2.简洁+优化1.0版部分：（中等简洁，效果较柔和）

3.简洁+优化2.0版部分：（很简洁，效果较柔和）

目标效果：

1.鼠标经过(mouseover)类名是nav的盒子的最近一级子级li，显示ul

2.鼠标离开(mouseout)类名是nav的盒子的最近一级子级li,隐藏ul

jQuery中：【使用jquery,记得要引入jquery文件】

用到的重点代码/原理：

1. $(this) 是jquery中的当前元素,this不加引号

2. show() 是jquery中的显示元素1

hide() 是jquery中的隐藏元素

toggle() 是jquery中的切换（显示，隐藏）元素

【如果要效果显得柔和】

改show() 为slideDown() 下滑动元素

改hide() 为slideUp() 上滑动元素

改toggle() 为slideToggle() 切换（上滑动，下滑动）元素

jquery中的事件切换（移入+移出）

4.jquery中停止排队

1.原案例版本（不简洁，效果较为僵硬）

使用的是

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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.min.js"></script>
</head>

<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>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            // 1.鼠标经过(mouseover)类名是nav的盒子的最近一级子级li
            $('.nav>li').mouseover(function () {
                // $(this)  是jquery中的当前元素 this不加引号
                // show()  是jquery中的显示元素
                $(this).children('ul').show();
            })
            // 2.鼠标离开(mouseout)类名是nav的盒子的最近一级子级li
            $('.nav>li').mouseout(function () {
                // $(this)  是jquery中的当前元素 this不加引号
                // hide()  是jquery中的隐藏元素
                $(this).children('ul').hide();
            })
        })
    </script>
</body>

</html>

2.简洁+优化1.0版<script></script>部分：（中等简洁，效果较柔和）

【修改的地方只是<script></script>中的部分】

简洁：用了hover(两个函数)

优化：

停止排队 stop()

<script>
        $(function () {
            $('.nav>li').hover(function () {
                // 1.相当于mouseenter的时候，下滑动显示ul
                $(this).children('ul').stop().slideDown(200);
            }, function () {
                // 2.相当于mouseleave的时候，上滑动隐藏ul
                $(this).children('ul').stop().slideUp(200);
            });
        })
</script>

3.简洁+优化2.0版<script></script>部分：（很简洁，效果较柔和）

【修改的地方只是<script></script>中的部分】

简洁：用了hover(一个函数)

优化：

停止排队 stop()

 <script>
        $(function () {
            $('.nav>li').hover(function () {
                //鼠标进入和离开都会触发toggle切换ul
                $(this).children('ul').stop().slideToggle(200);
            });
        })
</script>