谢谢

哦......我找到了..

我得到了..在jquery中我找到了一个“offset（）;”的方法这进一步给了我'左边和顶部的价值.. ..谢谢

ALHAMDULILLAH

Answer 1

好吧，我能想到的最好的方法是使用JQuery并在点击元素时动态生成div。

div应该绝对定位并设置为display：none（如果你想要下滑效果）。这是我为展示div而制作的快速示例：

$('.moreInfo').click(function(){
  var data = "Whatever data you want to show in the div";
  var div = $('<div />').text(data)
                        .css('display', 'none')
                        .css('position', 'absolute')
                        .css('top', $(this).outerHeight() + $(this).offset().top)
                        .css('left', $(this).position().left)
                        .css('width', '200px')
                        .css('height', '300px')
                        .css('border', '1px solid #000');
  $(this).after(div);
  div.slideDown(500);
});

（CSS可能也是一个单独的CSS规则，并且除了'top'和'left'属性之外你想要修改）

这会为每次点击打开一个新的div，因此您可能想要检查div是否已经存在，然后将其删除。

Answer 2

最简单的方法是在焦点和模糊上定义输入字段的函数：

<input id="sampleInput" type="text" onfocus="showDiv()" onblur="hideDiv()" />
<div id="content" style="position:absolute;top:0;left:0;visible:false;">...</div>

编辑：这是一些让你开始的伪代码

//This will give you the distance from the top of the page to the input box
inputTop =  inputElement.offsetTop;     

//This will give yout he height of the input element    
inputHeight = inputElement.offsetHeight;

//Now set the top of the content div to be the sum of the offsets:
contentDiv.style.top = inputTop + inputHeight;

//Now show the content div
contentDiv.style.visible = "true";

如何在所选文本字段下显示div

谢谢

2 个答案: