第一种方式:不提倡
<!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 οnclick="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 οnclick="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 οnclick="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 οnclick="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>