1

我正在动态构建一些嵌套列表。为了帮助您理解这里是一个抽象的例子。

要添加一个子类别，我会这样做：

obj.append('<ul id="' + id_ul + '"></ul>');
$("#" + id_ul).append('<li id="' + id + '"><h3>' + name + '</h3><p>' + text + '</p></li>');
$("#" + id_ul).append('<li id="' + id2 + '"><h3>' + name2 + '</h3><p>' + text2 + '</p></li>');

并在其中一个类别中添加一个项目，我这样做：

obj.append('<ul id="' + id_ul + '"></ul>');
$("#" + id_ul).append('<li id="' + id + '" data-icon="false"><a id="' + ida + '" href="#"><h3>' + name + '</h3><p>' + text + '</p><p class="ui-li-aside"><strong>' + info + '</strong></p></a></li>');
$("#" + id_ul).append('<li id="' + id2 + '" data-icon="false"><a id="' + ida2 + '" href="#"><h3>' + name2 + '</h3><p>' + text2 + '</p><p class="ui-li-aside"><strong>' + info2 + '</strong></p></a></li>');

obj 当然始终是我希望新的子类别或项目附加到的父对象。所以我通过附加到一个id来完成这一切。

我将此代码与版本 1.0.1 一起使用，它运行良好，现在我切换到 1.1.1（1.2.0 alpha 也有同样的问题），这是我的问题：

  • 嵌套列表中只有类别的页面：工作正常
  • 只有嵌套列表中的项目的页面：工作正常
  • 嵌套列表中同时包含类别和项目的页面：如果列表扩展了屏幕高度，则它不可滚动，并且在显示其中一个不可滚动页面后，我的导航中的所有其他页面也不再可滚动，直到我重新加载整个页面页

嵌套列表视图和从 JQueryMobile 1.1.1 向上滚动是否有任何已知问题？还是我建立了错误的列表？

目前这让我发疯，所以任何想法都会受到高度赞赏！

编辑：

这是最终列表的示例 HTML，其中包含一个子目录和 2 个项目：

<div data-role="page" data-url="mylist&amp;ui-page=ul_4" data-theme="c" data-count-theme="c" tabindex="0" class="ui-page ui-body-c ui-page-active">

<div data-role="header" data-theme="c" class="ui-header ui-bar-c" role="banner">
        <div class="ui-title">myuppercat</div>
</div>

<div data-role="content" class="ui-content" role="main">
    <ul id="ul_4" class="ui-listview">
        <li id="li_2134" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a href="#mylist&amp;ui-page=ul_4" class="ui-link-inherit"><h3 class="ui-li-heading">mysubcat</h3><p class="ui-li-desc"></p></a>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
            </div>
        </li>
        <li id="li_2136" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a id="2136" href="#" onclick="javascript:dosomething(this)" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc"><strong>somedetail</strong></p><h3 class="ui-li-heading">item1</h3><p class="ui-li-desc"></p></a>
                </div>
            </div>
        </li>
        <li id="li_2137" data-icon="false" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a id="2137" href="#" onclick="javascript:dosomething(this)" class="ui-link-inherit"><p class="ui-li-aside ui-li-desc"><strong>somedetail</strong></p><h3 class="ui-li-heading">item2</h3><p class="ui-li-desc"></p></a>
                </div>
            </div>
        </li>
    </ul>

</div>

4

0 回答 0