jquery 展开全部

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，展开全部通常指的是通过点击某个按钮或链接来显示页面上所有被折叠或隐藏的内容。

基础概念

选择器：jQuery 使用 CSS 选择器来选取 HTML 元素。
事件处理：绑定事件处理器到元素，以便在特定事件发生时执行代码。
显示/隐藏元素：使用 .show() 和 .hide() 方法来控制元素的可见性。

类型与应用场景

类型：展开全部功能通常涉及到按钮点击事件和元素的显示/隐藏状态切换。
应用场景：这种功能常见于折叠式菜单、FAQ 列表、文章摘要与全文切换等。

示例代码

以下是一个简单的 jQuery 示例，展示了如何实现展开全部的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 展开全部示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.collapsed {
    display: none;
}
</style>
</head>
<body>

<button id="expand-all">展开全部</button>

<div class="content">
    <div class="collapsed">这是隐藏的内容 1。</div>
    <div class="collapsed">这是隐藏的内容 2。</div>
    <div class="collapsed">这是隐藏的内容 3。</div>
</div>

<script>
$(document).ready(function() {
    $('#expand-all').click(function() {
        $('.collapsed').show(); // 展示所有带有 'collapsed' 类的元素
    });
});
</script>

</body>
</html>