Fatal编程技术网

Javascript 导航列表问题

javascript html css

Javascript 导航列表问题,javascript,html,css,listbox,html-lists,Javascript,Html,Css,Listbox,Html Lists,我正在开发下面的一个小应用程序，其中有一个列表项的集合。所有列表项都应该在框中，无论第二列中有多少个列表项。另外，我想对可以显示的列表项的数量保持一个限制，比如不超过10个，所以当有10个项目时，第10个项目应该被省略，并且“全部查看”应该被显示。因此，一旦用户单击View All，他就可以直接进入第二页，并显示所有项目 <style> ul { height: 20px; overflow: hidden; width: 180

我正在开发下面的一个小应用程序，其中有一个列表项的集合。所有列表项都应该在框中，无论第二列中有多少个列表项。另外，我想对可以显示的列表项的数量保持一个限制，比如不超过10个，所以当有10个项目时，第10个项目应该被省略，并且“全部查看”应该被显示。因此，一旦用户单击View All，他就可以直接进入第二页，并显示所有项目

<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>
下面是我的代码

谢谢

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


无标题文件
#容器{
边框：1px点#d7d7；
填充：0px 5px 5px 8px；
高度：250px；
宽度：250px；
} 
#标题{
}
保险商实验室{
显示：内联；
}
ulli{
显示：块；
}
风格

    

  • >>1
    • 

  • >>2
    • 

  • >>3
    • 

  • >>4
    • 

  • >>5
    • 

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

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


保险商实验室{
高度：20px；
溢出：隐藏；
宽度：180px；
}
李{
显示：块；
浮动：左；
高度：20px；
宽度：20px；
}
无限量{
高度：自动；
}
#查看所有{
显示：无；
}
否用于显示“查看全部”链接。我建议在服务器端生成。但是，如果您无法控制这一点，您可以使用javascript实现这一点，例如，您可以制作一个简单的jquery脚本：

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


$（文档）.ready（函数（）{
如果（$（“#集装箱ul li”）。长度>9）{
$（“#查看全部”）.show（）。单击（函数（）{
$（“#容器ul”）.addClass（“无限”）；
返回false；
});
}
});
在这里，我假设您的html中嵌入了一个id为“view\u all”的锚。你可以看到我们在这里做什么。CSS默认情况下隐藏“查看所有”链接，并在列表上使用固定的宽度和高度。如果有超过10个项目，它们将不可见，因为默认样式仅允许显示9个项目。但是，jquery脚本将告诉web浏览器使“视图所有”链接可见。然后我们在该链接上分配一个click事件处理程序。这将对列表应用一个类，该类删除允许显示所有列表项的固定高度

<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>
您可以通过多种不同的方式处理此问题，但这是一个简单的解决方案。还要注意的是，您希望在未排序的列表中添加一个id或类，以便在CSS/JS代码中更加明确。

请参见昨天的问题：