jquery实现多级手风琴菜单

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。手风琴菜单是一种常见的网页交互元素，用户可以点击展开或收起不同的内容区域。

类型

多级手风琴菜单通常指的是具有嵌套结构的菜单，每一级菜单都可以独立展开或收起。

应用场景

多级手风琴菜单常用于网站的导航栏、设置页面或信息展示页面，特别是在内容较多且需要分类展示的情况下。

示例代码

以下是一个使用 jQuery 实现多级手风琴菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-level Accordion Menu</title>
    <style>
        .accordion-menu {
            width: 300px;
        }
        .accordion-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .accordion-menu li {
            border-bottom: 1px solid #ccc;
        }
        .accordion-menu li:last-child {
            border-bottom: none;
        }
        .accordion-menu a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #333;
        }
        .accordion-menu .sub-menu {
            display: none;
        }
    </style>
</head>
<body>
    <div class="accordion-menu">
        <ul>
            <li>
                <a href="#" class="accordion-toggle">Menu 1</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub Menu 1.1</a></li>
                    <li><a href="#">Sub Menu 1.2</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="accordion-toggle">Menu 2</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub Menu 2.1</a></li>
                    <li><a href="#">Sub Menu 2.2</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.accordion-toggle').click(function(e) {
                e.preventDefault();
                $(this).next('.sub-menu').slideToggle('fast');
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：创建了一个包含多级菜单的 ul 列表，每个菜单项都有一个 a 标签作为触发器，子菜单使用 sub-menu 类来标识。
CSS 样式：设置了基本的样式，包括边框、内边距和隐藏子菜单。
jQuery 脚本：在文档加载完成后，绑定点击事件到 .accordion-toggle 类，当点击时，切换相邻的 .sub-menu 的显示状态。