2

このドロップダウン メニューを使用しようとしています: http://ttb.li/dump/buttons/dropdown.html

私のサイトでは、これは問題なく機能しているように見えますが、開いたウィンドウが正しくない高さに配置され、右に大きく離れています (私のサイトでは)。jsfiddleでは、配置が高すぎますが、少なくとも水平は正しいです。

コード: http://jsfiddle.net/EA6LS/1/

これを作成するためにサイトのデモから文字通りコピーして貼り付けましたが、省略した可能性のあるものは何も表示されません...アイデアをいただければ幸いです。

アップデート

わかりました、私はちょうど何かを考えました。私のサイトでは、900px のページ幅を定義しています。Firefox で「検査」を使用すると、JS がドロップダウンに 215 ピクセル (ギブ オア テイク) の左マージンを割り当てていることがわかります。それはおそらく私の画面では正確です。ただし、画面上ではなく、定義した900px領域の左側に要素を移動しています..これはrelativevs.absolute問題の可能性がありますか?

4

2 に答える 2

1

ドロップダウンを配置する JavaScript コードを削除して、CSS で定義するだけです。.dropdown相対的に配置.dropdown_contentすると、その親に対して相対的に配置されるため、配置が簡単になります。

.dropdown {
    ...
    position: relative;
}
.dropdown .dropdown_content {
    ...
    top: 100%;
    left: 0;
    margin: 5px 0;
}

次の JavaScript 行を削除します。

var o = $(this).parent().find('.dropdown_button').offset();
var h = $(this).parent().find('.dropdown_button').height();
$(this).parent().find('.dropdown_content').css({'top':(o.top+h-1),'left':o.left});

（それがインラインtopとleft値の由来です。）

また、スタイル定義から削除overflow: hiddenします。body

実際のデモ: http://jsfiddle.net/gilly3/EA6LS/2/

また、通常、jsfiddle の「Normalized CSS」のチェックを外すことをお勧めします。CSS をデバッグする場合、結果が混乱する可能性があります。

あなたがそれをしている間...そのJavaScriptは単純化することができます: http://jsfiddle.net/gilly3/EA6LS/4/

于 2012-08-01T19:59:08.227 に答える
0

ドロップダウン内のコンテンツには 11px のマージントップがありますが、現時点ではどこで定義されているかわかりません。

CSSで正しく定義すると、高さがオフセットされるという問題が解決するようです。

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 11px;    
}

編集: クロムでは、ユーザー エージェントの ul、menu、および dir のスタイルシートが

-webkit-margin-before: 1em;

これが犯人です（少なくとも私にとっては）

EDIT2: css を (間違った方法で jQuery を介して) インライン化しました。これが、オフセット エラーが発生する理由でもあります。

<ul class="dropdown_content" style="top: 135px; left: 164px; ">

「正しい」見た目のドロップダウンについては、この jsfiddleを参照してください。コメントにあるように、変更点は次のとおりです (javascript で、ドロップダウン コンテンツの上部を設定していた部分を削除したことに注意してください)。

CSS

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 0px;    
}

JavaScript

$(this).parent().find('.dropdown_content').css({'left':o.left});
于 2012-08-01T19:39:55.587 に答える