jquery 竖向三级导航

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。竖向三级导航通常指的是一个包含三个层级的导航菜单，每个层级都可以展开和折叠，通常用于网站的侧边栏或顶部导航栏。

类型与应用场景

静态导航：页面加载时就已经确定好的导航结构。
动态导航：根据用户的操作或其他条件动态生成的导航结构。
响应式导航：能够适应不同屏幕尺寸和设备的导航菜单。

应用场景包括但不限于：

企业网站
电商网站
博客和个人网站
管理后台系统

示例代码

以下是一个简单的 jQuery 竖向三级导航的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 三级导航</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
        .sub-menu {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<ul class="nav">
    <li>
        <a href="#">一级菜单1</a>
        <ul class="sub-menu">
            <li>
                <a href="#">二级菜单1-1</a>
                <ul class="sub-menu">
                    <li><a href="#">三级菜单1-1-1</a></li>
                    <li><a href="#">三级菜单1-1-2</a></li>
                </ul>
            </li>
            <li><a href="#">二级菜单1-2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">一级菜单2</a>
        <ul class="sub-menu">
            <li><a href="#">二级菜单2-1</a></li>
            <li><a href="#">二级菜单2-2</a></li>
        </ul>
    </li>
</ul>

<script>
$(document).ready(function() {
    $('.nav > li').hover(
        function() {
            $(this).find('.sub-menu').stop(true, true).slideDown();
        },
        function() {
            $(this).find('.sub-menu').stop(true, true).slideUp();
        }
    );
});
</script>

</body>
</html>