jquery缓缓下滑三级导航

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，可以使用 animate() 方法来创建自定义动画效果。

类型

jQuery 动画主要分为以下几种类型：

基本动画：如 fadeIn(), fadeOut(), slideUp(), slideDown() 等。
自定义动画：使用 animate() 方法创建自定义动画效果。

应用场景

jQuery 缓缓下滑三级导航适用于需要动态展示多级菜单的网站，如电商网站、企业官网等。

示例代码

以下是一个使用 jQuery 实现缓缓下滑三级导航的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 缓缓下滑三级导航</title>
    <style>
        .nav {
            width: 200px;
        }
        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            border-bottom: 1px solid #ccc;
        }
        .nav li ul {
            display: none;
            padding-left: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="nav">
        <ul>
            <li>菜单1
                <ul>
                    <li>子菜单1-1
                        <ul>
                            <li>子菜单1-1-1</li>
                            <li>子菜单1-1-2</li>
                        </ul>
                    </li>
                    <li>子菜单1-2</li>
                </ul>
            </li>
            <li>菜单2
                <ul>
                    <li>子菜单2-1</li>
                    <li>子菜单2-2</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            $('.nav > ul > li').hover(function() {
                $(this).find('ul').stop(true, true).slideDown(300);
            }, function() {
                $(this).find('ul').stop(true, true).slideUp(300);
            });
        });
    </script>
</body>
</html>