Question

看起来像ul列表的z-index覆盖重叠了固定的页眉和页脚，所以如果滚动的长列表没有正确地将自己定位在页脚和页眉下，使得包含的href链接无法点击...

       <div data-role="page" id="two" data-fullscreen="true">

        <div data-role="header" data-position="fixed">
         <h1>Whats in my juice?</h1>

          </div><!-- /header -->

        <div data-role="content">   
           <ul data-role="listview" data-theme="b" id="ingredients" data-split-icon="delete"></ul>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">


<div data-role="navbar">
    <ul>
        <li><a id="clear" data-icon="delete" class="ui-btn-left">Clear</a> </li>
        <li><a><span class="counta">0 Items</span></a></li>
        <li><a href="#save" data-icon="arrow-r" class="ui-btn-right" id="build-save">Next</a></li>
    </ul>
</div><!-- /navbar -->

        </div><!-- /footer -->

    </div><!-- /page -->

在上面的示例中，ul列表项是动态生成的。

<meta name="viewport" content="width=device-width, initial-scale=1">

包含在标题中。有什么想法吗？

Answer 1

有效版本可在此处使用：http://jsfiddle.net/shanabus/Eam2y/

我提到的ul上的z-index没有任何问题。你用li项填充列表的方式可能是一些错误吗？发布该代码可能会有所帮助，否则请在调试器中进行检查并验证：

有效的HTML正被添加到动态生成的列表项
您要在列表中调用refresh：$('#mylist').listview();

文档：http://jquerymobile.com/test/docs/lists/docs-lists.html

Answer 2

如果您使用的是Android设备，这也可能是Android中的一个错误。我有一个与重叠元素类似的iisue。

Answer 3

部分修复：添加

.ui-selectmenu { z-index: 1100 !important; }

到你的风格，解决按钮重叠。

jquery mobile 1.1 rc1 - 固定工具栏中的href无法正常工作

3 个答案: