1

我正在研究下面的一个小型应用程序，其中有一组列表项，所有列表项都应该在框中，无论它们在第二列中有多少。此外，我想限制可以显示的列表项的数量，比如不超过 10 个，所以当有 10 个项目时，第 10 个项目应该被省略，并且应该显示“查看全部”。因此，一旦用户单击查看全部，他就可以被定向到第二页，并且可以显示所有项目。

下面是我的代码。

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    #container {

border: 1px dotted #D7D7D7; 
padding: 0px 5px 5px 8px; 
height: 250px; 
width: 250px;


} 


#heading {

}
ul {
    display: inline;
}
ul li{
    display: block;
}

</style>
</head>
<div id="container">
    <div id="heading">Style </div>
    <ul>
        <li> >>1 </li>
        <li> >>2 </li>
        <li> >>3 </li>
        <li> >>4 </li>
        <li> >>5 </li>
        <li> >>6 </li>

    </ul>



</div>
<body>
</body>
</html>
4

1 回答 1

2

如果您希望限制显示的项目数量，您可以在列表项目上使用固定宽度并隐藏溢出以限制显示其他项目。

<style>
   ul {
        height: 20px;
        overflow: hidden;
        width: 180px;
      }

   li {
        display: block;
        float: left;
        height: 20px;
        width: 20px;
      }

   ul.unlimited {
       height: auto;  
   }

   #view_all {
       display: none;
   }
</style>

否用于显示查看全部链接。我建议在服务器端生成它。但是，如果您无法控制它，您可以使用 javascript 执行此操作，例如您可以制作一个简单的 jquery 脚本：

<script>
        $(document).ready(function() {
          if ($("#container ul li").length > 9) {
            $("#view_all").show().click(function() {
              $("#container ul").addClass("unlimited");
              return false;
            });
          }
        });
</script>

在这里，我假设您的 html 中嵌入了一个 id 为“view_all”的锚点。你可以在这里看到我们在做什么。CSS 默认隐藏所有视图链接，并在列表中使用固定的宽度和高度。如果有超过 10 个项目，它们将不可见，因为默认样式只允许显示 9 个。但是，jquery 脚本将告诉 Web 浏览器使视图所有链接可见。然后我们在该链接上分配一个点击事件处理程序。这将一个类应用于列表，该类删除了允许显示所有列表项的固定高度。

您可以通过多种不同的方式处理此问题，但这是一种简单的解决方案。另请注意，您可能希望将 id 或类添加到未排序列表中，以便在 CSS/JS 代码中更加明确。

于 2010-01-18T05:29:37.137 回答