0

我以编程方式创建了一个弹出窗口，可折叠和列表视图位于弹出窗口的内容中

可折叠和列表视图是通过使用 $.map加载我的数据动态创建的

这是我的jsFiddle

我只是想知道它有没有办法限制<li>列表视图中显示的数量？

例如

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

我只想让它显示 4 ，然后通过滚动显示<li>第五个<li><ul>

我该怎么做才能实现它？！

我试过设置高度<ul>，但它不起作用......

对不起我的英语不好...我是台湾人

如果你不明白我想说什么，请告诉我

我会尝试更好地解释它

4

2 回答 2

1

这是用解决方案更新的小提琴：http: //jsfiddle.net/ezanker/CnSMr/2/

基本上，我为您的可折叠 div (.popupcollapsediv) 分配一个类，然后将您的 UL 放入具有类 .ulcontainerdiv 的潜水中。

    $.map(kennedy.webdb.userdata[0].Category, function (value, key) {
    return $("<div/>", {
        id: value.Name,
        "data-role": "collapsible",
        "data-inset": "false",
        class: "popupcollapsediv"
    }).append(
      $("<h2/>", {
          text: value.Name
      })).append(
        $("<div/>", {
          class: "ulcontainerdiv"
        }).append(
          $("<ul/>", {
            "data-role": "listview",
            "data-icon": "false"
          }).append(
    ...

然后，我使用 CSS 设置包含每个 UL 的 div 的最大高度，同时如果包含的 UL 高于该最大高度，则允许滚动；并从可折叠创建的自动生成的 div 中删除填充。

.ulcontainerdiv{
    max-height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.popupcollapsediv .ui-body-a {
    padding: 0;
    margin: 0;
}
于 2013-10-28T14:38:40.853 回答
0

由于jQuery.map将数组的值和索引都发送到回调函数，为什么不在回调中包含一些内容，如下所示：

$.map( array, function ( value, index ) {
  // Make li here
  if ( index >= 4 ) {
    // Hide li here however you want, maybe just use .hide
  }
});
于 2013-10-27T13:43:02.363 回答