Home >Web Front-end >HTML Tutorial >Jquery's slideDown() conflicts with overflow:auto; under ie6_html/css_WEB-ITnose
Jquery's slideDown() conflicts with overflow:auto; under ie6_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:321363browse
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> I hope to have the sliding effect of slide, and I hope that ie6 can support scroll bar display. Please help me. Thank you...
Reply to the discussion (solution)
position:relative; Add a try
position:relative; Add Give it a try
Hello. I added the position attribute to the container I want to display. But still can't achieve the effect.
.show {
display:none;
height:100px;
overflow:auto !important;
}
.show {
display: none;
height:100px;
overflow:auto !important;
}
Thank you. Thank you. I added it, and IE6 was absolutely ok.