jQueryの基礎：要素の位置座標を操作する

サンプルはこちら。

See the Pen Basics of jQuery – Set of coordinates by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

まず左のボタンで表示のON/OFFを見てください。
表示されるポップアップには単にabsoluteがかけられているだけで、topとleftが設定されていないため左端に表示されます。

次に右のボタンで試してください。
jQueryでボタンの座標を拾い、それをもとにポップアップのtopとleftへ設定しています。

このように動的に座標セットを行うことで汎用性が増します。

JavaScript

左のボタンは「toggle()」をかけているのみなので、右のボタンのコードの説明をします。

$(".posToggle").click(function(){
  var setLeft = $(this).position().left; // ボタンのleft座標を取得
  var setTop = $(this).position().top + $(this).outerHeight(); // ボタンのtop座標と、ボタン自身の高さを取得
  $("#pop").css("left", setLeft);
  $("#pop").css("top", setTop);
  $("#pop").toggle();
});

右のボタンにはクラス「.posToggle」を付与しているので、それをフックに実行されます。

2行目と3行目についてですが、これはクリックされたボタンの位置座標をもとに、ポップアップに格納するための座標をセットしています。
2行目はleft座標だけを取得していますが、3行目についてはポップアップをボタンのすぐ下に表示させたいので、ボタンのtop座標＋ボタン自身の高さも加えて取得しています。

なお、要素の高さを取得する関数は今回使っている「outerHeight()」のほかに「height()」という関数もあります。
「outerHeight()」はborderやpaddingも含めた全体的な高さを取り、「height()」はそれらを抜いた本当に設定されている高さだけを取り出します。そのため「outerHeight()」を使う方が確実に見た目通りの高さを取ることができます。

座標を入れた「setLeft」と「setTop」をポップアップのスタイルに設定し、最後に「toggle()」で表示させています。