jQuery Accordion折叠面板的用法（附带实例）

jQuery UI 提供了很多实用性插件，包括开发人员常用的按钮、日期选择器、进度条等。本节对 jQuery UI 的折叠面板（Accordion）进行详细讲解。

折叠面板用来在一个有限的空间内显示用于呈现信息的可折叠的内容面板，单击折叠面板头部，展开或者折叠被分为各个逻辑部分的内容。此外开发人员可以选择性地设置，当鼠标指针悬停时是否切换各逻辑部分内容的展开或者折叠状态。

折叠面板标记需要包含至少一对标题和内容面板，例如折叠面板标记可以包含一系列的标题（<h3>标记）和内容面板 <div>。代码如下：

<div id="accordion">
    <h3>First header</h3>
    <div>First content panel</div>
    <h3>Second header</h3>
    <div>Second content panel</div>
</div>

在使用折叠面板时，如果焦点在标题（header）上，则如下键盘命令可用：

Up/Left：移动焦点到上一个标题上。如果当前焦点在第一个标题上，则移动焦点到最后一个标题上。
Down/Right：移动焦点到下一个标题上。如果当前焦点在最后一个标题上，则移动焦点到第一个标题上。
Home：移动焦点到第一个标题上。
End：移动焦点到最后一个标题上。
Space/Enter：激活与获得焦点的标题相关的内容面板（panel）。

当焦点在内容面板中时，键盘命令 Ctrl+Up 可以移动焦点到相关的标题上。

注意，jQuery UI 插件在使用时，要求具有一些功能性 CSS 文件，否则插件将无法工作。如果创建了一个自定义的主题，可使用插件指定的 CSS 文件作为起点，后文将不再说明。

折叠面板的常用选项及说明如下表所示：

表：折叠面板的常用选项及说明
选项	类型	说明
active	Boolean 或 Integer	当前展开哪一个内容面板
animate	Boolean 或 Number 或 String 或 Object	是否使用动画改变内容面板，且如何使用动画改变内容面板
classes	Object	指定要添加到小部件元素的其他类
collapsible	Boolean	所有逻辑部分的内容是否都可以马上折叠，允许折叠激活的部分
disabled	Boolean	如果设置为 true，则禁用该折叠面板
event	String	折叠面板头部会做出反应的事件，用以激活相关的内容面板。可以指定多个事件，且事件用空格间隔
header	Selector	标题元素的选择器，通过主要折叠面板元素上的 .find() 方法进行应用。内容面板必须是紧接在与其相关的标题后的同级元素
heightStyle	String	控制折叠面板和每个内容面板的高度
icons	Object	标题要使用的图标（icons），与 jQuery UI CSS 框架提供的图标匹配。设置为 false，则不显示图标

折叠面板的常用方法及说明如下表所示：

表：折叠面板的常用方法及说明
方法	说明
destroy()	完全移除折叠面板功能。这会把元素返回到它的预初始化状态
disable()	禁用折叠面板
enable()	启用折叠面板
instance()	在插件加载后可以安全地调用任何元素
option(optionName)	获取当前与指定 optionName 参数关联的值
option()	获取一个包含键值对的对象，键值对表示当前折叠面板选项为 Hash
option(optionName, value)	设置与指定 optionName 参数关联的折叠面板选项的值
option(options)	为折叠面板设置一个或多个选项
refresh()	处理任何在 DOM 中直接添加或移除的标题和内容面板，并重新计算折叠面板的高度
widget()	返回一个包含折叠面板的 jQuery 对象

折叠面板的常用事件及说明如下表所示：

事件	说明
activate(event, ui)	内容面板被激活后触发（在动画完成之后）。如果折叠面板之前为折叠状态，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果折叠面板正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象
beforeActivate(event, ui)	内容面板被激活前直接触发。可以取消，以防止内容面板被激活。如果折叠面板当前为折叠状态，则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果折叠面板正在折叠，则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象
create(event, ui)	当创建折叠面板时触发。如果折叠面板为折叠状态，则 ui.header 和 ui.panel 将是空的 jQuery 对象

【实例】实现一个折叠面板，默认第 1 个内容面板为展开状态。程序开发步骤如下。
1) 新建一个 index.html 文件，将其放到指定文件夹中。
2) 将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 复制到指定文件夹中。
3) 使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码，实现在网页中显示折叠面板的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>折叠面板（Accordion）的使用</title>
<script>
$(function () {
    $("#accordion").accordion({
        heightStyle: "fill"
    });

    $(function () {
        $("#accordion-resizer").resizable({
            minHeight: 140,
            minWidth: 200,
            resize: function () {
                $("#accordion").accordion("refresh");
            }
        });
    });
});
</script>
</head>
<body>
<h3 class="docs">折叠面板（Accordion）的使用</h3>
<div class="ui-widget-content" style="width:350px;">
    <div id="accordion">
        <h3>教材</h3>
        <div>
            <p>jQuery基础教程</p>
            <p>C语言入门教程</p>
            <p>C++基础教程</p>
        </div>

        <h3>标准库</h3>
        <div>
            <p>C语言标准库</p>
            <p>C++标准库</p>
        </div>

        <h3>实践</h3>
        <div>
            <p>C语言程序开发范例</p>
            <ul>
                <li>学生信息管理系统</li>
                <li>推箱子游戏</li>
                <li>扫雷游戏</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，效果如下图所示。

图 1 折叠面板效果

jQuery Accordion折叠面板的用法（附带实例）

相关文章