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>jQuery 折叠菜单示例</title>
    <style>
        .menu {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleMenu">显示/隐藏菜单</button>
    <div class="menu">
        <ul>
            <li>菜单项 1</li>
            <li>菜单项 2</li>
            <li>菜单项 3</li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            $('#toggleMenu').click(function() {
                $('.menu').slideToggle('fast');
            });
        });
    </script>
</body>
</html>