jquery 折叠内容

基础概念

jQuery 折叠内容是指使用 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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .content {
            display: none;
        }
    </style>
</head>
<body>
    <button id="toggleButton">展开/折叠</button>
    <div class="content">
        这是折叠的内容。
    </div>

    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('.content').slideToggle('slow');
            });
        });
    </script>
</body>
</html>