Question

我正在开发一个小型应用程序，其中有一个列表项集合，所有列表项都应该在框内，无论它们在第二列上有多少。此外，我想限制可以显示的列表项目的数量，而不是说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>

Answer 1

如果您要限制显示的项目数量，可以使用列表项目的固定宽度执行此操作，并隐藏溢出以剪切其他项目显示。

<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浏览器使视图的所有链接都可见。然后我们在该链接上分配一个click事件处理程序。这将一个类应用于列表，该列表删除固定高度，允许显示所有列表项。

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

导航列表问题

1 个答案: