Javascript通过overflow控制列表闭合与展开的方法

 本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下：

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<!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>通过overflow控制列表闭合展开</title>
<style type="text/css">
div dl
{
margin:0;
padding:0;
font-size:14px;
}
#divMain
{
width:500px;
background-color:#22477A;
margin:0 auto;
margin-top:30px;
}
dl
{
width:200px;
background:#A6BCE5;
height:14px; /*和字体大小一样高*/
overflow:hidden; /*默认溢出隐藏*/
}
dt
{
cursor:pointer; /*设置手型光标*/
font-weight:bold;
color:Green;
}
.open
{
height:112px;
overflow:visible;
}
.close
{
height:14px; /*和字体大小一样高*/
overflow:hidden;
}
</style>
<script type="text/javascript">
function DisplayList() {
var dtNode = window.event.srcElement;
var dlNode = dtNode.parentNode;
var dlNodes = document.getElementsByTagName("dl");
for (var i = 0; i < dlNodes.length; i++) {
if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl
if (dlNodes[i].className == "open") {
dlNodes[i].className = "close";
}
else {
dlNodes[i].className = "open";
}
}
else {
dlNodes[i].className = "close";
}
}
}
</script>
</head>
<body>
<div id="divMain">
<dl>
<dt onclick="DisplayList()">
球星列表1
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表2
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表3
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表4
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表5
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
<br />
<dl>
<dt onclick="DisplayList()">
球星列表6
</dt>
<dd>罗纳尔多</dd>
<dd>贝克汉姆</dd>
<dd>齐达内</dd>
<dd>内马尔</dd>
<dd>巴蒂斯图塔</dd>
<dd>梅西</dd>
</dl>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-08-01 10:35:18

Javascript通过overflow控制列表闭合与展开的方法的相关文章

Javascript通过overflow控制列表闭合与展开的方法_javascript技巧

本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法.分享给大家供大家参考.具体实现方法如下: <!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/xh

jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果_jquery

本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

用javascript改变和控制显示的图片大小

javascript|控制|显示 用javascript改变和控制显示的图片大小 <IMG src="forumnew.gif" style="border:1px #ff0000 solid" name=ntimg onResize="javascript: for(i=0;i<123 && (this.width>100||this.height>100);i++){ this.width-= this.widt

浅谈JavaScript事件的属性列表

  本文向大家简单介绍了javascript事件的属性列表,非常的详细,推荐给有相同需求的小伙伴们. HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为. 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. on

javascript上下方向键控制表格行选中并高亮显示的方法

 这篇文章主要介绍了javascript上下方向键控制表格行选中并高亮显示的方法,涉及javascript针对键盘按键操作相应的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

轻量函数式 JavaScript：八、列表操作

你在前一章闭包/对象的兔子洞中玩儿的开心吗?欢迎回来! 如果你能做很赞的事情,那就反复做. 我们在本书先前的部分已经看到了对一些工具的简要引用,现在我们要非常仔细地看看它们,它们是 map(..).filter(..).和 reduce(..).在 JavaScript 中,这些工具经常作为数组(也就是"列表")原型上的方法使用,所以我们很自然地称它们为数组或列表操作. 在我们讨论具体的数组方法之前,我们要在概念上检视一下这些操作是用来做什么的.在这一章中有两件同等重要的事情:理解列表

定位 光标-如何使用javascript使用方向键控制光标在table单元格的文本框(是TextBox控件)中跳动

问题描述 如何使用javascript使用方向键控制光标在table单元格的文本框(是TextBox控件)中跳动 最近在做一个仓库管理系统,客户说最好能用方向键来定位光标,不需要用鼠标点击,这样必须麻烦,我在table单元格中放了文本框(TextBox控件),如何用方向键来定位,谢谢大家啦...

Android仿QQ好友列表实现列表收缩与展开_Android

ExpandableListView是一个垂直滚动显示两级列表项的视图,与ListView不同的是,它可以有两层:每一层都能够被独立的展开并显示其子项. 好友QQ列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到android的ExpandableListView,今天研究了一下这个的用法,也参考了很多资料动手写了一个小demo,实现了基本的功能,下面直接上效果图以及源代码

JavaScript实现动态删除列表框值的方法_javascript技巧

本文实例讲述了JavaScript实现动态删除列表框值的方法.分享给大家供大家参考.具体如下: 使用JavaScript 动态删除列表框中的值,实际运用中可能效果会比较复杂,这只是一个基本功能单元,很多都是在此基础上扩展而来,运行代码点击"删除",会将列表框中的值一一删除,只保留一项数据. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "