ホームページ > ウェブフロントエンド > 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:32
オリジナル
1343 人が閲覧しました

ドロップダウン メニューを作成するときに、非表示の項目に 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属性を追加しました。しかし、まだ効果は得られません。

.show {

. one;
overflow:auto ! important;
ありがとうございます。追加しましたが、IE6 はまったく問題ありませんでした。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート