导航列表问题

我正在处理一个小应用程序，其中有一个列表项目集合，所有列表项目都应该放在方框内，不管他们在第二列上有多少个可能。另外，我想限制可以显示的列表项的数量，但不要超过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>

来源

2010-01-17 Josh

从昨天看这个问题：http://stackoverflow.com/questions/2077045/how-to-show-more-list-using-jquery – 2010-01-17 21:00:04

如果你正在寻找限制的项目数量显示您可以在隐藏从显示剪辑的其他项目列表项和溢出固定宽度做到这一点。

<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>

否显示查看所有链接。我会建议在服务器端生成。

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

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

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

来源

2010-01-18 05:29:37

导航列表问题

回答

相关问题