js_css_dl.dt实现列表展开、折叠效果
第一种方式：不提倡
<!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>展开、折叠</title> <style type="text/css"> /*缩进：展开内容*/ dl dd { margin: 10px; } /* 指定高度：16px（16px只有一行文字高度，所以只显示一行）;指定超出部分：隐藏 */ dl { height: 16px; overflow: hidden; } </style> </head> <body> <!-- 思路： 1：标签封装数据， 2：定义样式 3：明确事件源，事件，以及处理节点，dom 4：明确具体操作方式 --> <script type="text/javascript"> //初始style是hidden; var isHidden=true; function list(){ //获取dl节点 var oDlNode=document.getElementById("dl0"); if(isHidden){ oDlNode.style.overflow="visible"; isHidden=false; alert(isHidden); }else{ oDlNode.style.overflow="hidden"; isHidden=true; } } </script> <dl id="dl0"> <dt onclick="list()">显示条目1</dt> <dd>展开内容1.1</dd> <dd>展开内容1.2</dd> <dd>展开内容1.3</dd> <dd>展开内容1.4</dd> <dd>展开内容1.1</dd> <dd>展开内容1.2</dd> <dd>展开内容1.3</dd> </dl> </body> </html>
第二种方式，多个dl有问题
<!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>展开、折叠</title> <style type="text/css"> /* 02 */ /*缩进：展开内容*/ dl dd { margin: 10px; } /* 指定高度：16px（16px只有一行文字高度，所以只显示一行）;指定超出部分：隐藏 */ dl { height: 16px; } /* 03：预定义样式 */ .open { overflow: visible; } .close { overflow: hidden; } </style> </head> <body> <!-- 思路： 1：标签封装数据， 2：定义样式 3：明确事件源，事件，以及处理节点，dom 4：明确具体操作方式 -->// 4.1 //降低js和css的耦合，调用预定义样式,传入当前节点对象 function list2(node) { //为了操作dl，从dt获得dl var oDlNode =node.parentNode; // oDlNode.className="close"; if (oDlNode.className == "close") { oDlNode.className = "open"; } else { oDlNode.className = "close"; } } </script> <!-- 01:默认样式属性.close --> <dl class="close"> <dt onclick="list2(this)">显示条目1</dt> <dd>展开内容1.1</dd> <dd>展开内容1.2</dd> <dd>展开内容1.3</dd> <dd>展开内容1.4</dd> <dd>展开内容1.1</dd> <dd>展开内容1.2</dd> <dd>展开内容1.3</dd> </dl> <dl class="close"> <dt onclick="list2(this)">显示条目2</dt> <dd>展开内容2.1</dd> <dd>展开内容2.2</dd> <dd>展开内容2.3</dd> <dd>展开内容2.4</dd> <dd>展开内容2.1</dd> <dd>展开内容2.2</dd> <dd>展开内容2.3</dd> </dl> <dl class="open"> <dt onclick="list2(this)">显示条目3</dt> <dd>展开内容3.1</dd> <dd>展开内容3.2</dd> <dd>展开内容3.3</dd> <dd>展开内容3.4</dd> <dd>展开内容3.1</dd> <dd>展开内容3.2</dd> <dd>展开内容3.3</dd> </dl> </body> </html>
