☰

jQuery で要素を他の要素に対して相対的に配置するにはどうすればよいですか? 質問する

tag-icon • tag-icon jquery
jQuery で要素を他の要素に対して相対的に配置するにはどうすればよいですか? 質問する

ツールバーのようなメニューを含む隠し DIV があります。

マウスをホバーするとメニュー DIV が表示されるように設定されている DIV がいくつかあります。

メニューDIVをアクティブ（マウスホバー）DIVの右上に移動する組み込み関数はありますか？私は次のようなものを探しています$(menu).position("topright", targetEl);

ベストアンサー1

tl;dr: (試してみるここ）

次の HTML がある場合:

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

次の JavaScript コードを使用できます。

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

しかし、うまくいきません!

これは、メニューとプレースホルダーのオフセット親が同じである限り機能します。そうでない場合、および要素が DOM 内のどこにあるかを考慮するネストされた CSS ルールがない場合は#menu、次を使用します。

$(this).append($("#menu"));

要素を配置する行の直前#menu。

しかし、まだ機能しません!

このアプローチではうまくいかない奇妙なレイアウトがあるかもしれません。その場合は、jQuery.ui の位置プラグイン（答えこれは、考えられるあらゆる事態に対処します (以下を参照)。show()を呼び出す前にメニュー要素を指定する必要があることに注意してください。position({...})プラグインは非表示の要素を配置できません。

3年後の2012年の更新ノート:

（元の解決策はアーカイブされていますここ後世のために

つまり、ここで私が採用した元の方法は理想からは程遠いものでした。特に、次の場合には失敗します。

  • メニューのオフセット親はプレースホルダのオフセット親ではありません
  • プレースホルダーには境界線/パディングがあります

幸いなことに、jQuery は 1.2.6 で (position()およびouterWidth()) メソッドを導入しており、後者の場合に適切な値を見つけるのがはるかに簡単になります。前者の場合、appendメニュー要素をプレースホルダーに配置すると機能します (ただし、ネストに基づく CSS ルールに違反します)。

おすすめ記事