javascript - JQuery 移动可折叠内容未正确显示

Question

我在使用 JQuery Mobile 可折叠内容 ( http://jquerymobile.com/demos/1.2.0-rc.2/docs/content/content-collapsible.html ) 时遇到一些问题

此 HTML:

<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<div id="address_container">
Some hidden content here
</div>  
</div>

<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<div id="descriptions_container">
Some more hidden content here
</div>
</div>

应该像这样出现:

看起来像这样:

在损坏的示例中，按钮不会展开以显示隐藏的内容。页面上的 html 如 jquery 移动网站上的示例所示。页面加载时，最初很好，但很快页面就会闪烁，然后显示不正确，如上所示。更糟糕的是它不一致。有时有效，有时则无效。

损坏版本上的 HTML 显示它正在包含隐藏内容的 div 内插入整个隐藏内容容器。加载后如下:

任何有关导致此问题的原因以及如何解决该问题的建议或想法将不胜感激。

编辑:

好吧，我已经阻止了它的发生。我在页面开头的 HTML 元素之外有一些调试文本被 Response.Written 写入，停止此操作似乎已经停止了上述问题的发生。我想 JQuery Mobile 一定会因此而以一种不寻常的方式把它的玩具从婴儿车里扔出来。

Answer 1

如 jquerymobile.com 上的示例所示，尝试使用段落而不是 div 作为内容。你的代码是

<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<p id="address_container">
Some hidden content here
</p>  
</div>

<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<p id="descriptions_container">
Some more hidden content here
</p>
</div>