JavaScript-实例（实现展开效果）

DOM编程步骤：

1. 定义界面

通过html打开标签将数据进行封装

2.  定义一些静态的样式

通过CSS定义

3. 需要动态的完成和用户的交互

①  明确事件源

②  明确事件并将事件注册到事件源上

③  通过javascript的函数对象事件进行处理

④  在处理过程需要明确被处理的区域。

实例：展开闭合效果

方法介绍：

getElementByTagName(Stringstr),把节点名称传进去，返回document中所有的该名称的节点对象数组。

overflow： css样式的属性，功能：当该区域超过了规定的范围时，可以显示visible，隐藏hidden，或者auto和scroll。

需求一：通过单击，实现一个展开的闭合效果。

测试数据：

 <span style="font-family: Arial, Helvetica, sans-serif;"><div  οnclick="change()"></span><pre name="code" class="html"> 	大家快发啦付款
</div>

实现功能：

注:doctool是封装的js文件，里面有一些常用的函数方法，这样可以提高开发效率。

<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change()
{
	var divNode =byTag("div")[0];   
	//方法一：鼠标事件，单击字体调用本方法：展开闭合效果
	var b=true;
	if(b)
	{
		divNode.style.height="8px";
		divNode.style.overflow="hidden";
		b=false;
		
	}
	else
	{
		divNode.style.height="8px";
		divNode.style.overflow="visible";
		b=true;
		
	}
}

方法一不是特别好，但也是一种处理方法，不如通过选择器来进行操作。

方法二：展开闭合效果

if(divNode.className=="close")
			{
				divNode.className ="open";
				
			}
			else
			{
				divNode.className="close"; 
				//这是一个类选择器
			}

定义选择器：

 

<style type="text/css">
.open{
	 height:16px;
	overflow:visible;
	}
.close{
	 height:16px;
	 overflow:hidden;
	}
	
dl{
	height:16px;
	overflow:hidden;
	}
</style>

展示的效果：

单击后：

需求二：通过单击上层项目，下层项目展示出来

测试数据：通过event对象是SRCElement属性

 <dl>  
  <dt οnclick="list1()">上层项目上层项目</dt>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
 </dl>  
  
 <dl>  
  <dt οnclick="list1()">上层项目上层项目</dt>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
 </dl>  
  
function list1(dtNode)
{
	/*var dtNode = document.getElementsByTagName("dt")[0];
	  var dlNode = document.getElementsByTagName("dl")[0];
	这种方式也可以，但是获得节点dt很多的时候，这样就太麻烦了。
*/
 	var dtNode =event.srcElement;
	//拿到了dt之后，我需要确认当前dt所做的操作
	var dlNode =dtNode.parentNode;
	if(dlNode.className=="open")
	{
		dlNode.className ="close";
				
	}
else
	{
		dlNode.className="open"; 
			 
	} 
}	

需求三:当单击一个项目时，其它项目都要关闭，只有一个项目打开。

 

测试数据：将事件源对象通过this传入。

<dl>  
  <dt οnclick="list(this)">上层项目上层项目</dt>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
 </dl>  
  
 <dl>  
  <dt οnclick="list(this)">上层项目上层项目</dt>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
  <dd>下层项目下层项目</dd>  
 </dl>  
  
   
function list(dtNode)
{
	var dlNode =dtNode.parentNode; //得到dt节点对象的父节点dl		
var dlNodes=byTag("dl"); //获取所有的dl标签
for(var x=0;x<dlNodes.length;x++)
	{
		if(dlNodes[x]==dlNode)
		{
			if(dlNode.className=="open")
			{
				dlNode.className ="close";
				
			}
			else
			{
				dlNode.className="open"; 
			} 
		
		}
		else 
			dlNodes[x].className ="close";
		
		}
}