Question

在JQM 1.1.1中，Collapsibles无法正常工作。

例如，尝试重现此页面中的示例：

http://jquerymobile.com/test/docs/lists/lists-collapsible.html（非插曲，单个可折叠），可折叠配合所有页面和方角。如果我使用以前的版本1.1.0，一切都按预期工作。

下面的示例也有一个未经预料到的行为 - 列表分隔符绘制在collpasible标题上。

<div data-role="page" id="home_page">
<div data-role="header">
<h1>Phonegap App</h1>
</div> <!-- /header -->
<div data-role="content">
<div data-role="collapsible" data-inset="true" 
data-collapsed="false" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
<li><a href="page-links.html">Linking pages</a></li>
<li><a href="page-transitions.html">Page transitions</a></li>
<li><a href="loader.html">Page loading widget</a></li>
<li><a href="page-dialogs.html">Dialogs</a></li>
<li><a href="popup/index.html">Popups</a></li>
<li class="ui-corner-bottom"><a href="pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->

使用jquery.mobile-1.1.1.css jquery.mobile-1.1.1.js jquery-1.7.2.min.js

这是一个错误还是我做错了什么？谢谢！

Answer 1

这似乎是一个错误，这是一个快速的CSS修复：

.ui-listview .ui-li-divider {
    margin : 5px -1px 0 -1px;
}

前一段时间我注意到，当jQuery Mobile网站中的元素重叠时，你通常可以通过一些边距调整来修复它。

以下是演示：http://jsfiddle.net/JYN76/

jquery mobile 1.1.1 - 可折叠的奇怪行为

1 个答案: