本帖最后由 那些人之一 于 2014-1-10 10:36 编辑
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <style type="text/css">
- dl dd
- {
- margin:0px;
- }
- dl
- {
- height:16px;
-
- }
-
- .open
- {
- overflow:visible;
- }
- .close
- {
- overflow:hidden;
- }
-
- </style>
- </head>
- <script type="text/javascript">
- var flag=true;
- function list()
- {
- var oDlNode = document.getElementsByTagName("dl")[0];
-
- if(flag)
- {
- //2,修改style样式属性中的overflow属性值。
-
- oDlNode.style.overflow ="hidden";
- flag=false;
-
- }
- else(flag)
- {
- //2,修改style样式属性中的overflow属性值。
-
- oDlNode.style.overflow ="visible";
- flag=true;
-
- }
- //alert("lucky man");
- }
- function list2(index)
- {
- var oDlNode = document.getElementsByTagName("dl")[index];
- if(oDlNode.className=="close")
- {
- oDlNode.className="open";
- }
- else
- {
- oDlNode.className="close"
- }
- }
- </script>
- <body>
- <dl class="open">
- <dt onclick="list2(1)"> 显示条目一</dt>
- <dd> 展开列表内容1</dd>
- <dd> 展开列表内容2</dd>
- <dd> 展开列表内容3</dd>
- <dd> 展开列表内容4</dd>
- </dl>
-
- <dl class="open">
- <dt onclick="list2(2)"> 显示条目2</dt>
- <dd> 展开列表内容1</dd>
- <dd> 展开列表内容2</dd>
- <dd> 展开列表内容3</dd>
- <dd> 展开列表内容4</dd>
- </dl>
-
- <dl class="open">
- <dt onclick="list2(3)"> 显示条目3</dt>
- <dd> 展开列表内容1</dd>
- <dd> 展开列表内容2</dd>
- <dd> 展开列表内容3</dd>
- <dd> 展开列表内容4</dd>
- </dl>
- </body>
- </html>
复制代码
|