解决JQuery的 slideDown()函数导致ie6的overflow失效的个人解决办法。
2012-05-02 14:37
232 查看
我在写下拉菜单的时候,用到了slideDown()的下拉效果。
贴出代码比较直观一些。
由于内容可能会超出限定范围,超出的话,自然需要有个滚动条,所以加了overflow:auto属性。但是在ie6下,无论怎么设置,其属性总是无法达到效果。
经过多次的反复尝试,总算是找到问题的根源所在:即当我的display:none;到显示,如果只是用show();那么一切都是ok的,在遇到slideDown()会发生这个情况,同样的slideToggle()也是如此。但是,我需要的就是一个落下来的效果,一种渐变。
自己百思不得其解的时候,就只能求助于诸位大侠了。
http://topic.csdn.net/u/20120428/17/650607eb-f5b6-426c-bcf8-b33044f9f85f.html?seed=2066218933&r=78411054#r_78411054
calmcrime帮忙提供了一个办法:
为overflow加上!important;
这里的!important是将overflow的优先级定位最前,也就是说即使你在行内进行了样式定义,它的优先级也要比其要高些。
下面是我转载的!important的相关文章链接
http://user.qzone.qq.com/384086118/blog/1335878916
或者
http://hi.baidu.com/yanghaonan7758/blog/item/1f7ee2ee8b7c83d9b31cb18f.html
可以进行详细了解。
诚然,加上!important之后,ie6的效果是出来了。但是在下拉的时候各个浏览器都会先闪现一下滚动条之后在隐藏掉,这是我很不喜欢的,后来只能写css hack,只针对ie6写_overflow:auto !important;
后来想过,如果改成slideDown().css('display','auto');会是如何,得到的效果是和不适用css hack的效果是一样的。但个人推荐还是用css hack好些,因为这样的一个闪现的效果过就让ie6独自承担就好了。
不知诸位有什么好的方法没有,希望能够共享下……
贴出代码比较直观一些。
<!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=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul,li { padding:0; margin:0; } ul { list-style:none; } #out { width:300px; height:400px; border:solid 1px #999; overflow:auto; } .show { display:none; height:100px; overflow:auto; } </style> <script type="text/javascript" src="js/jquery1.6.1.js"></script> <script type="text/javascript"> function show(obj) { var inner = $(obj).parent(); var showul = inner.find('ul:first'); showul.slideToggle(); } </script> </head> <body> <ul id="out"> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> <li class="inner"><a href="javascript:void(0);" onclick="show(this);">点击</a> <ul class="show"> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> <li>show</li> </ul> </li> </ul> </body> </html>
由于内容可能会超出限定范围,超出的话,自然需要有个滚动条,所以加了overflow:auto属性。但是在ie6下,无论怎么设置,其属性总是无法达到效果。
经过多次的反复尝试,总算是找到问题的根源所在:即当我的display:none;到显示,如果只是用show();那么一切都是ok的,在遇到slideDown()会发生这个情况,同样的slideToggle()也是如此。但是,我需要的就是一个落下来的效果,一种渐变。
自己百思不得其解的时候,就只能求助于诸位大侠了。
http://topic.csdn.net/u/20120428/17/650607eb-f5b6-426c-bcf8-b33044f9f85f.html?seed=2066218933&r=78411054#r_78411054
calmcrime帮忙提供了一个办法:
.show { display:none; height:100px; overflow:auto !important; }
为overflow加上!important;
这里的!important是将overflow的优先级定位最前,也就是说即使你在行内进行了样式定义,它的优先级也要比其要高些。
下面是我转载的!important的相关文章链接
http://user.qzone.qq.com/384086118/blog/1335878916
或者
http://hi.baidu.com/yanghaonan7758/blog/item/1f7ee2ee8b7c83d9b31cb18f.html
可以进行详细了解。
诚然,加上!important之后,ie6的效果是出来了。但是在下拉的时候各个浏览器都会先闪现一下滚动条之后在隐藏掉,这是我很不喜欢的,后来只能写css hack,只针对ie6写_overflow:auto !important;
后来想过,如果改成slideDown().css('display','auto');会是如何,得到的效果是和不适用css hack的效果是一样的。但个人推荐还是用css hack好些,因为这样的一个闪现的效果过就让ie6独自承担就好了。
不知诸位有什么好的方法没有,希望能够共享下……
相关文章推荐
- jquery的选择器$('')在IE6下对JS动态生成(比如ajax生成的)的元素失效的解决办法
- IE6、IE7下样式overflow:hidden失效的解决办法
- jquery的选择器$('')在IE6下对JS动态生成(比如ajax生成的)的元素失效的解决办法
- jQuery.form.js插件回调函数失效的解决办法
- UITapGestureRecognizer导致UITableView的didSelectRowAtIndexPath函数失效解决办法
- jquery的slideUp、slideDown函数在IE中bug解决办法
- jquery 更改angularJS input 内容导致绑定失效的解决办法
- 解决jquery中,使用append增加元素时,该元素的绑定监听事件失效的办法
- Xcode升级导致插件失效的解决办法
- mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法
- margin-bottom在IE6和IE7下失效的解决办法
- 经常插拔USB设备导致USB功能失效:通用串行总线控制器出行黄色感叹号的解决办法
- jQuery在updatePanel中失效的解决办法
- Stack overflow at line 解决办法(重复引入JS导致)
- jQuery全选全不选第二次失效问题解决办法
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
- 一个js导致的jquery失效问题的解决方法
- jquery使用("#id").click(function(){})点击事件失效的解决办法
- updatePanel导致JS失效的解决办法(转)
- jquery动态改变onclick属性导致失效的问题解决方法