码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-07-28 12:16:58      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

代码如下:

 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}

 

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

标签:

原文地址:http://www.cnblogs.com/zhangfengyang/p/4682165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!