Question

使用此：

<!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版本中，而是动态创建类。

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

Answer 1

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

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

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

更新：刚刚在本地进行了复制/粘贴，一切正常。所以这不是代码，必须与你的设置有关。

更新2：看着你的问题，我意识到你想要 - 内容 - 是主题。如果需要，您必须为内容分配data-role =“content”。

Answer 2

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

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

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

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

我不确定谁会将迈克提供的图像路径解决方案投票给这个问题的答案，因为它没有回答发布的问题。

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

jQuery mobile collapsible div没有正确的样式

2 个答案: