特定のポイント、クロスブラウザ、クロス解像度でdiv（ドロップダウンメニュースタイル）を表示

Question

私はそのdivのメニュースタイルを 'ドロップダウン'しようとしています。ボタンが押されると、divはその下の正確な位置に表示されます。ここで

は、Googleの翻訳からの例です：

これはdiv要素であり、その左右使って、ボタンの下に正確に配置します。

私はユーザーの画面サイズを知ることができないので、どのように左右を正確に指定しなくてもこれを行うことができますか？また、これはクロスブラウザでなければなりません。

これは私が現在持っているものです。 http://jsfiddle.net/pCg9N/

Answer 1

あなたはこのような何か行うことができます：あなたは上にそれを設定する必要はありませんので、

$(document).ready(function() { 
    // So that we don't have jQuery search every time. 
    var $button = $("button"); 

    // Button's left offset, relative to the document. 
    var buttonLeft = $button.offset().left; 
    // Button's right offset, relative to the document. 
    var buttonTop = $button.offset().top; 
    // innerHeight() includes CSS padding. 
    var buttonHeight = $button.innerHeight(); 

    // Finally, set the div's left and top CSS attributes. 
    $("div").css("left", buttonLeft + "px"); 
    $("div").css("top", buttonTop + buttonHeight + "px"); 
}); 

$('button').on('click', function() { 
    // I changed this to toggle() so that it hides again if clicking twice ;-) 
    $('div').toggle(); 
}); 

は、基本的には、今ではボタンの位置情報を利用していますがdiv。これは助けが必要ですが、残念なことにクロスブラウザサポートは必ずしも単純ではありません。関連するjQueryの関数のドキュメントへ

http://jsfiddle.net/pCg9N/15/

リンク：：

は、私はまた、より良い私たちは、完全なものについては、以下の更新されたバージョンを参照してくださいやっていることを示すために、あなたの例では、ほとんどの周りにCSSを変更し

• offset()
• css()
• innerHeight()
• toggle()