jQuery 移动可折叠 div 样式不正确答案

【问题标题】：jQuery mobile collapsible div not styling correctlyjQuery 移动可折叠 div 样式不正确
【发布时间】：2011-09-27 14:01:58
【问题描述】：

使用这个：

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js">    </script>
</head> 
<body> 

<div data-role="collapsible" data-theme="a" data-content-theme="a">
   <h3>Header swatch A</h3>
   <p>I'm the collapsible content with a themed content block set to "A".</p>
</div>
</body>
</html>

我发现展开的可折叠没有预期的主题样式 - 实际上它没有。在查看页面的源代码并将其与 jQuery mobile (http://jquerymobile.com/test/docs/content/content-collapsible.html) 上的示例页面进行比较时，动态创建的 div 似乎缺少以下类环绕在可折叠文件中标题下方的扩展段落：

ui-btn-up-a ui-corner-bottom

运行示例页面的代码是他们自己的内部代码，与用于部署的代码不同，所以我猜他们的代码中有一些东西不在动态创建类的 beta 版本中。

问题是是否有人知道错误是什么以及如何解决？

【问题讨论】：

在页面jquerymobile.com/test/docs/content/content-collapsible.html 上查看标题“Theming Collapsible Headers”下的内容，您可以看到我想要实现的内容，内容的主题是底部有一个漂亮的圆形边框，因此它出现在带有从其扩展的标题的块。它通过在由 js 创建的包装 div 上放置类“ui-btn-up-a”来实现这一点，而不是核心 html 代码的一部分。当我尝试复制它时，“ui-btn-up-a”并未应用于包装 div，因此缺乏样式。

标签： jquery coding-style mobile

【解决方案1】：

Google 代码 CSS 文件具有对图像的相对引用。

url(images/icons-18-white.png);

这很少有用。尝试在本地托管 CSS 文件并更改引用以匹配您的文件结构。此外，除非您使用 firebug 查看源代码，否则您将看不到这些类。使用浏览器的“查看源代码”选项会显示服务器提供的代码，而不是 javascript 创建的代码。

更新：刚刚在本地复制/粘贴，一切正常。所以这不是代码，一定是你的设置。

更新 2： 看到您的问题，我意识到您希望 -content- 成为主题。如果需要，您必须为内容分配一个 data-role="content" 。

【讨论】：

您好，感谢您的输入，但问题不在于样式路径。可折叠的标题样式很好，所有图标都存在等它是缺少任何格式的可折叠的内容。如果我使用 firebug 并从 jQuery 移动站点中删除类，样式也会消失，所以我很确定这是动态创建的包装 div 没有格式化主题外观所需的所有类的情况。如果您使用上面的代码并按照描述替换样式表是整个可折叠样式还是只是带有 + - 图标的标题？
事实上，我可以使用 Firebug 来编辑 html 并将 ui-btn-up-a 添加到类中，它会变成我想要的样子。
Hrm，好的，我稍后会进一步研究。仅供参考，Google 不会永远托管该测试版代码（我刚刚在测试版 2 中学到了这一点），因此请确保在他们拉出它时您有一个备用计划。
谢谢迈克，这仍然行不通。如果我将 data-role="content" data-theme="a" data-content-theme="a" 添加到 p 标签，它的样式会像标题一样，但它没有按照 jQuery 移动网站上的示例进行分组链接到问题中。他们也没有在所示示例中的内容元素上使用任何数据标签。

【解决方案2】：

好的答案是：“主题化可折叠内容需要 jquery 1.6.4”

引用的版本在我发布上述问题两天后发布的 rc1 版本的日志中。

我使用的是旧版本，在 jquery 示例页面上查看源代码这并不明显，因为没有立即明显的版本控制参考：

<script src="../../js/jquery.js"></script>

我不确定谁会投票赞成 Mike 提供的图像路径解决方案，因为它没有回答发布的问题。

因此，如果您升级您的 jq 手机，您将需要升级您的 jquery 以利用所提供的功能。

【讨论】：