jquery - jQuery を使用して要素を別の要素と比較して表示する

Question

ユーザーがボタンをクリックできるようにする必要があるインターフェイスに取り組んでいます。次に、ボタンに対して相対的に配置されたフローティング div を表示します (下向き矢印をクリックしたときに表示される領域と考えることができます)。ドロップダウン)。

このフローティング要素を、クリックされたボタン (ページのどこにでもある可能性があります) に隣接して正しく配置するにはどうすればよいですか?

前もって感謝します！！

Answer 1

を使用してボタンの位置を取得できます.offset()

例えば：

$("#myButton").click(function() {
  var o = $(this).offset();
  $("#myDiv").css({'position': 'absolute','left':o.left,'top',o.top});
});

これにより、ボタンの真上に配置されます。左/上を調整して、配置したい場所に配置します。

たとえば、ボタンの下に配置するには、上部を'top': o.top + $(this).height()ボタンの右または右に変更します。'left':o.left + $(this).width()

Answer 2

<input type="button" id="btn" value="Choose Something" />

<div id="select">
  ...
</div>

CSSで：

#select { position: absolute; display: none; }

および Javascript:

$("#btn").click(function() {
  var sel = $("#select");
  var pos = $("#btn").offset();
  if (sel.is(":hidden")) {
    sel.attr({
      top: pos.top + 20,
      left: pos.left
    });
    sel.show();
  } else {
    sel.hide();
  }
});

基本的に、フローティング div を絶対に配置して通常のフローから削除し、それを使用offset()してボタンに対してどこに配置するかを決定します。

Answer 3

要素が階層的に配置されている場合は、.offset() を使用して位置を取得および設定する必要があります。

例2

<input type="button" id="myButton" value="Choose Something" 
     style="position: absolute; top: 100px;" />
<div style="position: absolute; top: 200px;">parent div
    <div id="myDiv" style="position: absolute; top: 20px;">child div</div>
</div>

$("#myButton").click(function () {
    var o = $(this).offset();
    $("#myDiv").offset({
        'left': o.left,
        'top': o.top - 20
    });
});

ここにフィドルがあります：http://jsfiddle.net/R5YM6/1/