【jQuery】offset().topを用いたプルダウンメニューの動的配置

今回は初歩的なミスで引っかかってしまったので、忘れないようにメモ。

目的

ある要素の上をhoverするとプルダウンが表示されるようにしたい。

プルダウンの位置は動的に配置したい。

例としては以下の通り。

<p><input type="text" name="" value="" placeholder="TEST"></p>
<aside class="dialog">
　<h3>TEST</h3>
　<p class="box"><input type="text" name="" value="" placeholder="searcn"></p>
　<p><a href="#" title="">test1</a></p>

　・

　・

　・

</aside>

ここでいうと、asideを直前のpの上に配置するのが目的。 

しかし、jQueryoffset().topの値が取れない…。

検証

１．offset()が動作する条件を再確認

　 jQuery日本語リファレンスによると

戻り値のオブジェクトはtopとleftの2つの数値を持ちます。この関数は、可視状態にある要素に対してのみ有効です。

　とのこと。

　初めは非表示だからってasideをcssでdisplay:noneにしてた。

　ここを修正すれば直るはず、、、

　直らない

　まぁ、そうだとは思ったけどさ。

　それにしても位置が滅茶苦茶ズレている。

２．そもそもoffset().topの値が予想どおり取れてるか検証

　取れているっちゃとれていたけど、親要素にposition設定するの忘れていたから表示位置がずれていた。

　ここを直してみる。

　今の結果はこんな感じ。

３．とりあえずmarginで調整してみる　

　まぁ、ダメでしたよねｗ

　これに頼らなくてもいい筈だし。

　よくみると、offset().topで出た値が妙に大きい…

　とすると、この要素の前に問題があるみたい。

４．前の要素を確認してみる

　結論からいうと、原因はここにありました。

　実は、前の要素にfloatで横並びにさせた要素があったんですね。

　で、そこの計算を行う前に、offset().topで位置を取得して設定していたから計算が合わなかった訳です。

　納得。

　そして確認してみると、、、

　まだ余白が余る！！

　まだ何か余計なことしているのか。

　よーく見てみると気がついた！

　親要素にpadding-topを設定していた(笑)

　残りの余白はこれが原因だったみたい。

結果

　動的に設定する時は特に記述する順番と効かせているものを把握してから設定しましょう。

　今日はこんなところで。