折叠和展开～


<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css"></style>
<script type="text/javascript" src="DOMhelp.js"></script>
<script type="text/javascript" src="sc.js"></script>
</head><body>
<h3>contact details</h3>
<address>aaaaaaa<br/>
         bbbbbb<br/>
 cccccc<br/>
 dddddd<br/>
</address></body>
</html>var sc={
init:function(){
sc.head=document.getElementsByTagName('h3')[0];
sc.ad=DOMhelp.closestSibling(sc.head,1);
sc.ad.style.display='none';
var t=DOMhelp.getText(sc.head);
var collapselink=DOMhelp.createLink('#',t);
sc.head.replaceChild(collapselink,sc.head.innerHTML);
DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);
collapselink.onclick=function(){return;}
},
peekaboo:function(e){
sc.ad.style.display=sc.ad.style.display=='none'?'':'none';
DOMhelp.cancelClick(e);
}
}
DOMhelp.addEvent(window,'load',sc.init,false);


DOMhelp={
 debugWindowId:'DOMhelpdebug',
 init:function(){
  if(!document.getElementById || !document.createTextNode){return;}
 },
 lastSibling:function(node){
  var tempObj=node.parentNode.lastChild;
  while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
   tempObj=tempObj.previousSibling;
  }
  return (tempObj.nodeType==1)?tempObj:false;
 },
 firstSibling:function(node){
  var tempObj=node.parentNode.firstChild;
  while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
   tempObj=tempObj.nextSibling;
  }
  return (tempObj.nodeType==1)?tempObj:false;
 },
 getText:function(node){
  if(!node.hasChildNodes()){return false;}
  var reg=/^\s+$/;
  var tempObj=node.firstChild;
  while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
   tempObj=tempObj.nextSibling;
  }
  return tempObj.nodeType==3?tempObj.nodeValue:false;
 },
 setText:function(node,txt){
  if(!node.hasChildNodes()){return false;}
  var reg=/^\s+$/;
  var tempObj=node.firstChild;
  while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
   tempObj=tempObj.nextSibling;
  }
  if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
 },
 createLink:function(to,txt){
  var tempObj=document.createElement('a');
  tempObj.appendChild(document.createTextNode(txt));
  tempObj.setAttribute('href',to);
  return tempObj;
 },
 createTextElm:function(elm,txt){
  var tempObj=document.createElement(elm);
  tempObj.appendChild(document.createTextNode(txt));
  return tempObj;
 },
 closestSibling:function(node,direction){
  var tempObj;
  if(direction==-1 && node.previousSibling!=null){
   tempObj=node.previousSibling;
   while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
     tempObj=tempObj.previousSibling;
   }
  }else if(direction==1 && node.nextSibling!=null){
   tempObj=node.nextSibling;
   while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
     tempObj=tempObj.nextSibling;
   }
  }
  return tempObj.nodeType==1?tempObj:false;
 },
 initDebug:function(){
  if(DOMhelp.debug){DOMhelp.stopDebug();}
  DOMhelp.debug=document.createElement('div');
  DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
  document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
 },
 setDebug:function(bug){
  if(!DOMhelp.debug){DOMhelp.initDebug();}
  DOMhelp.debug.innerHTML+=bug+'\n';
 },
 stopDebug:function(){
  if(DOMhelp.debug){
   DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
   DOMhelp.debug=null;
  }
 },
 getKey:function(e){
  if(window.event){
       var key = window.event.keyCode;
     } else if(e){
       var key=e.keyCode;
     }
  return key;
 },
/* helper methods */
 getTarget:function(e){
  var target = window.event ? window.event.srcElement : e ? e.target : null;
  if (!target){return false;}
  while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
   target=target.parentNode;
  }
  return target;
 },
 stopBubble:function(e){
  if(window.event && window.event.cancelBubble){
   window.event.cancelBubble = true;
  } 
  if (e && e.stopPropagation){
   e.stopPropagation();
  }
 },
 stopDefault:function(e){
  if(window.event && window.event.returnValue){
   window.event.returnValue = false;
  } 
  if (e && e.preventDefault){
   e.preventDefault();
  }
 },
 cancelClick:function(e){
  if (window.event){
   window.event.cancelBubble = true;
   window.event.returnValue = false;
  }
  if (e && e.stopPropagation && e.preventDefault){
   e.stopPropagation();
   e.preventDefault();
  }
 },
 addEvent: function(elm, evType, fn, useCapture){
  if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
  } else if (elm.attachEvent) {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
  } else {
   elm['on' + evType] = fn;
  }
 },
 cssjs:function(a,o,c1,c2){
  switch (a){
   case 'swap':
    o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
   break;
   case 'add':
    if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
   break;
   case 'remove':
    var rep=o.className.match(' '+c1)?' '+c1:c1;
    o.className=o.className.replace(rep,'');
   break;
   case 'check':
    var found=false;
    var temparray=o.className.split(' ');
    for(var i=0;i<temparray.length;i++){
     if(temparray[i]==c1){found=true;}
    }
    return found;
   break;
  }
 },
    safariClickFix:function(){
      return false;
    }
}
DOMhelp.addEvent(window, 'load', DOMhelp.init, false);
代码没有成功，不知道为啥？
DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);这句话的作用和语法规则是什么啊？sc.head=document.getElementsByTagName('h3')[0];中的sc.head算是什么呢？算做对象？
peekaboo:function(e){
sc.ad.style.display=sc.ad.style.display=='none'?'':'none';
DOMhelp.cancelClick(e);
}这个函数是什么意思啊？e代表什么啊

解决方案 »

  1.   

    addEvent: function(elm, evType, fn, useCapture){ //是一个绑定事件方法
      if (elm.addEventListener){ //这个是W3C的绑定事件方法
       elm.addEventListener(evType, fn, useCapture);
       return true;
      } else if (elm.attachEvent) { //这个是IE的绑定事件方法
       var r = elm.attachEvent('on' + evType, fn);
       return r;
      } else {
       elm['on' + evType] = fn; //这个是传统的绑定事件方法
      }
     }
    sc是一个对象,sc.head是对象的属性peekaboo:function(e){ //e代表事件对象也就是event
    sc.ad.style.display=sc.ad.style.display=='none'?'':'none'; //这个是隐藏或者显示
    DOMhelp.cancelClick(e); //这个方法是取消对象默认事件和冒泡事件
    }
      

  2.   


    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css"></style>
    <script type="text/javascript" defer>
    DOMhelp={
     debugWindowId:'DOMhelpdebug',
     init:function(){
      if(!document.getElementById || !document.createTextNode){return;}
     },
     lastSibling:function(node){
      var tempObj=node.parentNode.lastChild;
      while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
       tempObj=tempObj.previousSibling;
      }
      return (tempObj.nodeType==1)?tempObj:false;
     },
     firstSibling:function(node){
      var tempObj=node.parentNode.firstChild;
      while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
       tempObj=tempObj.nextSibling;
      }
      return (tempObj.nodeType==1)?tempObj:false;
     },
     getText:function(node){
      if(!node.hasChildNodes()){return false;}
      var reg=/^\s+$/;
      var tempObj=node.firstChild;
      while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
       tempObj=tempObj.nextSibling;
      }
      return tempObj.nodeType==3?tempObj.nodeValue:false;
     },
     setText:function(node,txt){
      if(!node.hasChildNodes()){return false;}
      var reg=/^\s+$/;
      var tempObj=node.firstChild;
      while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
       tempObj=tempObj.nextSibling;
      }
      if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
     },
     createLink:function(to,txt){
      var tempObj=document.createElement('a');
      tempObj.appendChild(document.createTextNode(txt));
      tempObj.setAttribute('href',to);
      return tempObj;
     },
     createTextElm:function(elm,txt){
      var tempObj=document.createElement(elm);
      tempObj.appendChild(document.createTextNode(txt));
      return tempObj;
     },
     closestSibling:function(node,direction){
      var tempObj;
      if(direction==-1 && node.previousSibling!=null){
       tempObj=node.previousSibling;
       while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
         tempObj=tempObj.previousSibling;
       }
      }else if(direction==1 && node.nextSibling!=null){
       tempObj=node.nextSibling;
       while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
         tempObj=tempObj.nextSibling;
       }
      }
      return tempObj.nodeType==1?tempObj:false;
     },
     initDebug:function(){
      if(DOMhelp.debug){DOMhelp.stopDebug();}
      DOMhelp.debug=document.createElement('div');
      DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
      document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
     },
     setDebug:function(bug){
      if(!DOMhelp.debug){DOMhelp.initDebug();}
      DOMhelp.debug.innerHTML+=bug+'\n';
     },
     stopDebug:function(){
      if(DOMhelp.debug){
       DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
       DOMhelp.debug=null;
      }
     },
     getKey:function(e){
      if(window.event){
           var key = window.event.keyCode;
         } else if(e){
           var key=e.keyCode;
         }
      return key;
     },
    /* helper methods */
     getTarget:function(e){
      var target = window.event ? window.event.srcElement : e ? e.target : null;
      if (!target){return false;}
      while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
       target=target.parentNode;
      }
      return target;
     },
     stopBubble:function(e){
      if(window.event && window.event.cancelBubble){
       window.event.cancelBubble = true;
      } 
      if (e && e.stopPropagation){
       e.stopPropagation();
      }
     },
     stopDefault:function(e){
      if(window.event && window.event.returnValue){
       window.event.returnValue = false;
      } 
      if (e && e.preventDefault){
       e.preventDefault();
      }
     },
     cancelClick:function(e){
      if (window.event){
       window.event.cancelBubble = true;
       window.event.returnValue = false;
      }
      if (e && e.stopPropagation && e.preventDefault){
       e.stopPropagation();
       e.preventDefault();
      }
     },
     addEvent: function(elm, evType, fn, useCapture){
      if (elm.addEventListener){
       elm.addEventListener(evType, fn, useCapture);
       return true;
      } else if (elm.attachEvent) {
       var r = elm.attachEvent('on' + evType, fn);
       return r;
      } else {
       elm['on' + evType] = fn;
      }
     },
     cssjs:function(a,o,c1,c2){
      switch (a){
       case 'swap':
        o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
       break;
       case 'add':
        if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
       break;
       case 'remove':
        var rep=o.className.match(' '+c1)?' '+c1:c1;
        o.className=o.className.replace(rep,'');
       break;
       case 'check':
        var found=false;
        var temparray=o.className.split(' ');
        for(var i=0;i<temparray.length;i++){
         if(temparray[i]==c1){found=true;}
        }
        return found;
       break;
      }
     },
        safariClickFix:function(){
          return false;
        }
    }
    DOMhelp.addEvent(window, 'load', DOMhelp.init, false);var sc={
        init:function(){
            sc.head=document.getElementsByTagName('h3')[0];
            sc.ad=DOMhelp.closestSibling(sc.head,1);
            sc.ad.style.display='none';
            var t=DOMhelp.getText(sc.head);
            var collapselink=DOMhelp.createLink('#',t);
            sc.head.replaceChild(collapselink,sc.head.childNodes(0));
            DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);
            collapselink.onclick=function(){return;}
        },
        peekaboo:function(e){
            sc.ad.style.display=sc.ad.style.display=='none'?'':'none';
            DOMhelp.cancelClick(e);
        }
    }
    DOMhelp.addEvent(window,'load',sc.init,false);</script>
    </head><body>
    <h3>contact details</h3>
    <address>aaaaaaa<br/>
             bbbbbb<br/>
             cccccc<br/>
             dddddd<br/>
    </address></body>
    </html>
      

  3.   

    sc.head.replaceChild(collapselink,sc.head.innerHTML);
    改成
    sc.head.replaceChild(collapselink,sc.head.childNodes(0));
      

  4.   

    再改一下:
    sc.head.replaceChild(collapselink,sc.head.innerHTML); 
    改成 
    sc.head.replaceChild(collapselink,sc.head.childNodes[0]);
      

  5.   

    为什么innerHTML不可以呢？
      

  6.   


    这个是replaceChild替换节点方法~·
    所以不能用innerHTML,如果要用innerHTML就起不到替换的作用了~·
      

  7.   

    如果display=none的话付空格符这是什么意思啊？
      

  8.   


    none是不显示~·空格符就是显示
      

  9.   

    document.getElementsByTagName('h3')[0];这个方法不是说把第一个h3元素变成一个对象吗？
      

  10.   


    是拿到第一个h3标签~`
    var h3 = document.getElementsByTagName('h3')[0];
    h3是对象的引用~·
      

  11.   

    可以写成var h3 = document.getElementsByTagName('h3')[0]; 
    然后h3是sc的属性这样理解？
      

  12.   


    var sc = {} //这样是声明一个对象,是空对象，什么都没有.sc = {
       head:'我是sc的属性head'     //这样写是sc的属性
    }alert(sc.head); //这样就是访问sc的head属性,弹出来的值是'我是sc的属性head'
      

  13.   


    不是~··他不是这样写的吗?
     sc.head=document.getElementsByTagName('h3')[0];他把document.getElementsByTagName('h3')[0];这个对象赋值给sc.head赋值给了sc对象的head属性访问sc.head就等于访问document.getElementsByTagName('h3')[0]
      

  14.   

    DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);
    为什么不用collapselink.addEventListener('click',sc.peekaboo,false);呢？
    DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);第一个参数代表什么意思啊？
      

  15.   

    第一个参数代表绑定的对象~·
    比如我想给一个按钮<input type='button' id='butt' value='提交' />绑定事件就这么写
    collapselink 就等价与要绑定的对象,document.getElementById('butt');
    DOMhelp.addEvent(document.getElementById('butt'),'click',sc.peekaboo,false);能明白吗？
    第二个参数'click'代表事件类型,就是onclick事件
    他这么写就是把事件方法封装起来
    因为IE跟FF浏览器实现的事件方法不一样~·
      

  16.   

    IE和FF实现onclick的方法不一样，用DOMhelp.addEvent（）就可以统一起来了？
      

  17.   


    是事件绑定不一样~··addEvent: function(elm, evType, fn, useCapture){ //是一个绑定事件方法 
      if (elm.addEventListener){ //这个是W3C的绑定事件方法 
      elm.addEventListener(evType, fn, useCapture); 
      return true; 
      } else if (elm.attachEvent) { //这个是IE的绑定事件方法 
      var r = elm.attachEvent('on' + evType, fn); 
      return r; 
      } else { 
      elm['on' + evType] = fn; //这个是传统的绑定事件方法 
      } 
    }看我注释~·
      

  18.   

    collapselink是个对象，sc.head.childNodes[0]是指h3里面的内容吧，二者为什么可以替换呢？
    为什么不能直接替换sc.head呢？
      

  19.   

    sc.head只是h3对象的引用，并不是对象本身,所以sc.head.childNodes[0]指的才是对象本身.才可以替换~`
      

  20.   

    collapselink.onclick=function(){return;}
    拿了有什么用啊？
      

  21.   


    是指h3对象的子对象
    <h3><span></span><h3>
    [1]就指span [0]就是h3自身
      

  22.   

    是不是这个意思:  sc.head=document.getElementsByTagName('h3')[0];是对第一个h3的引用
    sc.head.childNodes[0]是h3的本身，[1]的话是<span>本身？
      

  23.   

    DOMhelp.addEvent(collapselink,'click',sc.peekaboo,false);
    collapselink.onclick=function(){return;}
    有了第一句为什么还要下面那句呢？
      

  24.   


    应该是取消<a>的默认事件~·