Jquery's slideDown() conflicts with overflow:auto; under ie6_html/css

Jquery's slideDown() conflicts with overflow:auto; under ie6_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:10:32

Original

1345 people have browsed it

When I was making a drop-down menu, I added the slideDown() sliding effect to the hidden items. Add overflow:auto to the outer container; let the scroll bar appear after it exceeds the content. But under IE6, it is hidden and no scroll bar appears. The same is true for slideToggle().
The following is the 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>

Copy after login

I hope to have the sliding effect of slide, and I hope that ie6 can support scroll bar display. Please help me. Thank you...