标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/zjsy/p/4446545.html
