可折叠内容框无法工作



我一直在寻找一个解决方案,包括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与我现有的CSS一起发挥作用呢?

此外,我正在尝试将一个Jotform代码嵌入到集合中。然而,即使我已经在里面粘贴了代码(尝试嵌入、iframe、source),扩展面板中也没有显示任何内容。帮助

我也一直在学习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>

现在在你的身体内尝试以下粘贴在第一页的身体内:-

<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/

最新更新