導航列表問題

我正在處理一個小應用程序，其中有一個列表項目集合，所有列表項目都應該放在方框內，不管他們在第二列上有多少個可能。另外，我想限制可以顯示的列表項的數量，但不要超過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

導航列表問題

回答

相關問題