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

ie6下Jquery的slideDown()与overflow:auto;冲突_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:10:32

原创

1390人浏览过

    本人在做一个下拉菜单的时候，为隐藏的项添加了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>

登录后复制

本人希望既有slide的滑动效果，又希望ie6能支持滚动条显示，请各位大侠帮忙。谢谢了……