onclick控制元素显示与隐藏时,点击第一次无反应的原因

代码如下:

 1 for(i=0;i<this.aDiv.length;i++){
 2                             this.aDiv[i].index=i;
 3                             this.aDiv[i].oUl=this.aDiv[i].getElementsByTagName(‘ul‘)[0];
 4                             this.aDiv[i].oUl.aA=this.aDiv[i].oUl.getElementsByTagName(‘a‘);
 5                             this.aDiv[i].onmousedown=function(){
 6                                 if(this.oUl.display===‘none‘)
 7                                     this.oUl.style.display=‘block‘;
 8                                 else
 9                                     this.oUl.style.display=‘none‘;
10                             }
11                         }

上面的代码要实现的效果是,党我点击DIV的时候,如果ul是隐藏的,那么显示出来,否则,就隐藏.但是当我点击第一次的时候,它总是没有反应,必须我点击第二次的时候,才能正常工作.

这是因为当我第一次点击的时候,虽然ul在CSS设置里是display:none;但是用if(this.oul.display===‘none‘)并无法获取到display的属性值.只有当我们把display:‘none‘;写在行间样式的时候,才会被识别.

解决办法就是用一个JS函数,去获取计算过后的样式,也就是确切的属性

1 2//obj是要查询的元素,attr是要查询的属性3function getStyle(obj,attr){
2     if(obj.currentStyle){//IE
3         return obj.currentStyle[attr];
4     }else{//ff
5         return getComputedStyle(obj,false)[attr];
6     }
7 }

这样上面的效果代码应该改为:

1 this.aDiv[i].onmousedown=function(){
2      if(getStyle(this.oUl,‘display‘)===‘none‘)
3           this.oUl.style.display=‘block‘;
4      else
5           this.oUl.style.display=‘none‘;
6}