gpt4 book ai didi

javascript - 导航列表问题

转载 作者:行者123 更新时间:2023-11-28 13:50:58 25 4
gpt4 key购买 nike

我正在开发下面的一个小应用程序,其中有一个列表项集合,所有列表项都应该在框中,无论它们有多少,它们都可以在第二列中。另外我想限制可以显示的列表项的数量,比如不超过 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>

最佳答案

如果您希望限制显示的元素数量,您可以在列表元素上使用固定宽度并 overflow hidden 来限制显示的其他元素。

<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”的 anchor 。你可以看到我们在这里做什么。 CSS 默认隐藏 view all 链接,并在列表上使用固定的宽度和高度。如果超过 10 个元素,它们将不可见,因为默认样式只允许显示 9 个。然而,jquery 脚本将告诉网络浏览器使 View 所有链接可见。然后我们在该链接上分配一个点击事件处理程序。这将一个类应用于列表,该类删除了允许显示所有列表项的固定高度。

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

关于javascript - 导航列表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2082607/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com