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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <button id="expandBtn">展开更多内容</button>
    <div id="content" class="hidden">
        <p>这是隐藏的内容。</p>
        <p>点击按钮可以展开更多内容。</p>
    </div>

    <script>
        $(document).ready(function() {
            $('#expandBtn').click(function() {
                $('#content').toggleClass('hidden');
                if ($('#content').hasClass('hidden')) {
                    $(this).text('展开更多内容');
                } else {
                    $(this).text('收起内容');
                }
            });
        });
    </script>
</body>
</html>