0

我有 html 列表，其中包含可见和隐藏元素。可见性随时间动态变化（一些元素被隐藏，一些被显示）。

<ul>
   <li>  </li>
   <li style="display:none">  </li>
   <li>  </li>
   <li style="display:none">  </li>
   <li>  </li>
   <li>  </li>
   <li>  </li>
</ul>

我想要的是最多显示 X 个元素的列表，因此<li>应该隐藏 X 之外的 s。实现这一目标的建议方法是什么？我提出了两个想法：

  • 设置常量大小<ul>并添加overflow: hidden（开销<li>将不可见）。这很简单，但只有在<li>' 具有恒定大小并且您可以预测适合列表的元素数量时才有效。
  • 使用 javascript（我使用 jQuery）来计算可见元素的数量并隐藏应该隐藏的元素。

如果有办法在纯 CSS 中做到这一点，你能建议首选方法或答案吗？

4

3 回答 3

2

使用gt()选择器，以及:visible

$('li:visible:gt(20)').hide()

或者，使用slice()：

$('li:visible').slice(20).hide()
于 2013-02-18T11:37:15.517 回答
1

使用第 n 个子选择器，您可以使用纯 css 实现它。但请注意，IE 不支持它。

在此示例中，我没有应用display:none，而是应用了color:#ff0000以便您可以欣赏结果。将 4 替换为需要显示的 LI 元素的数量。

<style> 
     ul li:nth-child(1n+4)
     {
       color:#ff0000;
     }
 </style>


<ul> 
  <li> a </li>
  <li> b  </li>
  <li> c </li>
  <li> d</li>
  <li> e </li>
  <li> f </li>
  <li> g </li>
 </ul>
于 2013-02-18T12:24:14.680 回答
1

您可以制作一个控制隐藏可见元素的功能

function checkList()
{    
    $('ul li:visible:gt(X)').hide(); 
}

并且您需要在每次更改 UL 时调用该函数，它是 LI。我建议对 UL 进行更多标识，也许是通过 ID 属性。

于 2013-02-18T11:42:58.630 回答