解决JQuery的 slideDown()函数导致ie6的overflow失效的个人解决办法。

最新推荐文章于 2022-11-29 23:31:31 发布

qinglinglaoren

最新推荐文章于 2022-11-29 23:31:31 发布

阅读量2.7k

点赞数

分类专栏： Div+Css+Js 文章标签： ie jquery javascript class xhtml css

本文链接：https://blog.csdn.net/qinglinglaoren/article/details/7527900

版权

Div+Css+Js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

我在写下拉菜单的时候，用到了slideDown()的下拉效果。

贴出代码比较直观一些。

<!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);" οnclick="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);" οnclick="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);" οnclick="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);" οnclick="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);" οnclick="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独自承担就好了。

不知诸位有什么好的方法没有，希望能够共享下……

qinglinglaoren

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
解决JQuery的 slideDown()函数导致ie6的overflow失效的个人解决办法。

我在写下拉菜单的时候，用到了slideDown()的下拉效果。贴出代码比较直观一些。无标题文档 ul,li { padding:0; margin:0; } ul { list-style:none; } #out { width:300px; height:400px; border:solid 1px #999; overflow:aut
复制链接

扫一扫

专栏目录