列表的展开与闭合

	
		
   
   
		
		
		
	
	
		
   
   
		<script type="text/javascript">
			var flag = true;
			//列表展开闭合效果。 
			function list2(){
				/*
				 * 思路：
				 * 1,无非就是将dl属性的overflow的值改成visible即可。
				 * 2,要先获取dl节点。
				 * 3,改变该节点的style.overflow的属性。
				 */
				//1，获取dl节点。
				var oDlNode = document.getElementsByTagName("dl")[0];
				//2,修改style样式属性中的overflow属性值。
//				oDlNode.style.overflow = "visible";
				if(flag){
					oDlNode.style.overflow = "visible";
					flag = false;
				}else{
					oDlNode.style.overflow = "hidden";
					flag = true;
				}
			}
			
			//重新定义list。降低js和css的耦合性。
			function list3(node){
//				alert(node.nodeName);//dt
				//1，获取dl节点。
//				var oDlNode = document.getElementsByTagName("dl")[0];
				var oDlNode = node.parentNode;
//				alert(oDlNode.nodeName);
				//2，设置dl的className属性值。 
//				oDlNode.className = "open";
				if(oDlNode.className == "close"){
					oDlNode.className = "open";
				}else{
					oDlNode.className = "close";
				}
			}
			/*
			 * 在多个列表下，一次只需要展开一个列表其他列表都关闭。
			 * 怎么保证开一个，而关其他呢？
			 * 思路：
			 * 1，获取所有的dl节点。
			 * 2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作。
			 */
			function list(node){
				//获取对当前的dl节点。
				var oDlNode = node.parentNode;
				//获取所有的dl节点。
				var collDlNodes = document.getElementsByTagName("dl");
				//遍历所有dl。
				for(var x=0; x
   
   
			
    
    
     
     显示条目一
    
    
			
    
    

     
     展开列表内容1
    
    
			
    
    

     
     展开列表内容1
    
    
			
    
    

     
     展开列表内容1
    
    
			
    
    

     
     展开列表内容1
    
    
		
		
    
    

			
     
     
      
      显示条目二
     
     
			
     
     

      
      展开列表内容2
     
     
			
     
     

      
      展开列表内容2
     
     
			
     
     

      
      展开列表内容2
     
     
			
     
     

      
      展开列表内容2
     
     
		
    
    
		
    
    

			
     
     
      
      显示条目三
     
     
			
     
     

      
      展开列表内容3
     
     
			
     
     

      
      展开列表内容3
     
     
			
     
     

      
      展开列表内容3
     
     
			
     
     

      
      展开列表内容3