ホームページ >ウェブフロントエンド >htmlチュートリアル >Jquery の slideDown() は、ie6_html/css_WEB-ITnose の overflow:auto と競合します。
Jquery の slideDown() は、ie6_html/css_WEB-ITnose の overflow:auto と競合します。
- WBOYオリジナル
- 2016-06-24 12:10:321365ブラウズ
ドロップダウン メニューを作成するときに、非表示の項目に slideDown() スライド効果を追加しました。 overflow:auto を外側のコンテナに追加すると、コンテンツを超えた後にスクロール バーが表示されます。ただし、IE6 では非表示になり、スクロール バーは表示されません。 slideToggle() についても同様です。
以下はデモです
<!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> スライドのスライド効果が欲しいのですが、IE6 がスクロールバー表示をサポートできるようにしてください。ありがとうございます...
ディスカッションに返信 (解決策)
Position:relative; 試しを追加
Position:relative; 試しを追加
こんにちは。表示したいコンテナにposition属性を追加しました。しかし、まだ効果は得られません。
. one;
overflow:auto ! important;
ありがとうございます。追加しましたが、IE6 はまったく問題ありませんでした。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。