javascript - 要素の下と水平方向の中央にdivを配置する

Question

このようなコンテキストメニューがあるとしましょう

    |here|there|somewhere|

これは簡単です

<ul>
    <li>here</li>
    ...
<ul>

with と onclick 次のような画像で div を追加したい:

    |here|there|somewhere|
            ^

要素の中央に水平方向に配置され、その下に垂直方向に配置されます。どうすればいいですか？

Answer 1

css を介して画像を背景としてメニュー項目に追加し、下部の中央に配置します。

CSS:

li { background: url(your_image_url) no-repeat center bottom; }

Javascript:

document.getElementById('id').style.background = "url(your_image_url) no-repeat center bottom";

Jクエリ:

$('#id').css('background','url(your_image_url) no-repeat center bottom');

Answer 2

特にやりたいことに応じて、多くの方法がありますが、ここではその1つを示します。

$("li").on('click', function () {
   $("<div>").width($(this).width())
      .css({'display': 'inline-block', 'text-align': 'center'})
      .text('here')
      .appendTo(this);
});

Answer 3

この目的のために jquery offset() 関数を使用してください!

$("ul li").click( function() {
var pos = $(this).offset();
var width = $(this).width();
var height = $(this).height();
var halfW = width/2;
var widthOfImageDiv = 20; // assume that div with image has width of 20px
var halfWIMG = widthOfImageDiv/2;
var posLeft = pos.left+halfW-halfWIMG;
var posTop = pos.top+height;
$(".imageDiv").css({ 'position':'absolute', 'top':posTop+"px", 'left':posLeft+"px" });
$(".imageDiv").show();
});