可折叠内容块

在上一节中，我们学习了如何在 PhoneGap 中创建多页面 UI。现在，我们将学习可折叠内容块以及如何在我们的 PhoneGap 应用程序中使用它。

之前，我们处理的是移动应用程序开发中有限的实际空间，我们没有足够的屏幕来占用它。为此，UI 中使用了不同的技术，以便尽可能多地利用屏幕上的额外实际空间。在这种情况下，我们将向其提供“可折叠内容块”。这些块是可以折叠的块，从而为我们提供屏幕上更多的空间。

我们将使用之前的示例来演示可折叠内容块。以下是在我们的应用程序中包含可折叠内容块的步骤

1) 创建 index2.html 文件

我们将创建一个新文件 index2.html，其中的代码与 index.html 中的代码相同。我们将在 index2.html 文件中进行更改，而不是在 index.html 中。

2) 创建可折叠块

现在，我们将创建一个 div 标签，用于一个可折叠集，其中将包含多个标签用于创建不同的块。我们将创建一个包含一些内容的块，当 data-collapsed 设置为 false 时，该块将执行。

3) 创建另一个可折叠块

接下来，我们将再创建两个可折叠块。第一个可折叠块将设置为默认值，第二个设置为 true。我们将复制第一个可折叠块并用于以下两种情况：

注意：一次只能打开一个可折叠块。

这确实是一种处理 JQuery Mobile 屏幕上大量数据的好方法。我们的屏幕区域非常有限，可折叠内容块将帮助我们充分利用该区域。