<style type="text/css">   
#extend{width:300px;}   
li{border:1px solid #99CC00;margin:3px;}
ul{list-style:none;}   
.on ul{display:block;}   
.off ul{display:none;} 
.clr{
background:#FFFF99;} 
</style>   
一个可以无限扩展层次级的折叠菜单<br />   
Web标准化 http://www.div-css.com<br />   
<div id="extend">   
<ul>   
    <li><a href="#">中国</a>   
   <ul>   
    <li class="off"><a href="#">陕西</a>   
     <ul>   
      <li><a href="#">西安</a></li>   
      <li><a href="#">商洛</a></li>   
     </ul>   
    </li> 
    
    <li class="off"><a href="#">黑龙江</a>   
     <ul>   
      <li><a href="#">大庆</a></li>   
      <li><a href="#">鹤岗</a></li>   
     </ul>   
    </li>   
   
    <li><a href="#">安徽</a>   
     <ul>   
      <li><a href="#">黄山</a></li>   
      <li><a href="#">六安</a></li>   
     </ul>   
    </li>   
   
    <li><a href="#">广东</a>   
     <ul>   
      <li><a href="#">深圳</a>   
       <ul>   
        <li><a href="#">罗湖</a>   
        
        </li>   
        <li><a href="#">福田</a></li>   
       </ul>   
      </li>   
      <li><a href="#">广州</a></li>   
     </ul>   
    </li>   
   </ul>   
    </li>
    
    <li class="clr"><a href="#">美国</a>   
        <ul>   
            <li><a href="http://www.baidu.com">佛罗里达州</a></li>   
            <li><a href="#">俄勒冈</a></li>   
        </ul>   
    </li>   
</ul>   
</div>   
<script type="text/javascript">   
(function(){   
    var o=document.getElementById("extend");   
    var links=o.getElementsByTagName("a");   
    for(var i=0;i<links.length;i++){   
        links[i].i=i;  

        links[i].onclick=function(){   
            if(links[this.i].parentNode.className=="on"||links[this.i].parentNode.className=="")
    {   
                links[this.i].parentNode.className="off clr";   
            }
    else
    {   
                links[this.i].parentNode.className="on";   
            }   
        }   
    }   
})();   
</script>links[i].i=i;  这句是什么意思?
请帮忙详细解答下!谢谢