这篇文章主要介绍了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/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程序设计有所帮助。
新闻热点
疑难解答
图片精选
