ie6下Jquery的slideDown()与overflow:auto;冲突

qinglinglaoren 2012-04-28 05:21:30

本人在做一个下拉菜单的时候，为隐藏的项添加了slideDown（）的滑动效果。为外层容器添加overflow：auto；让其超出内容后能够出现滚动条。但是在ie6下却是被隐藏掉的，并没有滚动条的出现。同理的slideToggle（）也是如此。
以下是demo



<!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>