Question

我一直在寻找一个解决方案，包括Stackoverflow上的许多解决方案，但我仍然无法让它工作，因此问题。

目的是将可折叠内容框放在一个简单的html页面中。在看了几个演示后，我觉得以下看起来最好并且很容易安装（脚本已经托管，只需处理html）：http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_sets

我已将以下内容粘贴到头部：

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

省略了元名称和链接rel，因为如果它们被包含在内，页面的格式就会搞乱（某些标题文本变为粗体，按钮未对齐）。

以下内容放在页面上的所需位置：

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
  </div>

...

<div data-role="footer">
    <h1>Insert Footer Text Here</h1>
</div>
    </div>

然而，当我在Firefox中查看页面时，隐藏功能无效;一切都显示出来。有人可以建议吗？

谢谢安迪。我设法让它有点工作，但发现它弄乱了我的字体和东西。从头部删除此行

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

修复了它，但渲染了可折叠集。我不相信他们期望人们把他们的代码放到一个不使用CSS的网站上，显然我不会抛弃我的并使用他们的，所以我怎么能让这个链接的CSS玩得很好现有的？

另外，我试图在集合中嵌入一个Jotform代码。但是，即使我已经粘贴了代码（尝试嵌入，iframe，源代码），在展开的面板中也没有显示任何内容。帮助

Answer 1

我也在学习Jquery Mobile。

您的标题需要以下内容，只需要基础知识，以便您可以使用它： -

<!DOCTYPE html>

<html lang="en">

<head>
<title>my test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

现在，在你的身体内尝试粘贴在pageone体内的以下内容： -

  <div data-role="main" class="ui-content">
<div data-role="collapsibleset">
  <div data-role="collapsible">
    <h3>Click me - I'm collapsible!</h3>
    <p>I'm the expanded content.</p>
  </div>
  <div data-role="collapsible">
    <h3>Click me - I'm collapsible!</h3>
    <p>I'm the expanded content.</p>
  </div>
  <div data-role="collapsible">
    <h3>Click me - I'm collapsible!</h3>
    <p>I'm the expanded content.</p>
  </div>
  <div data-role="collapsible">
    <h3>Click me - I'm collapsible!</h3>
    <p>I'm the expanded content.</p>
  </div>
</div>

我强烈建议您花一点时间在Jquery Mobile网站http://jquerymobile.com/

上

可折叠集小部件直接链接到此处http://api.jquerymobile.com/collapsibleset/

可折叠内容框无效

1 个答案: