Javascript使组件动态地跟随另一个组件

Question

我有一个动态渲染的div / span，需要遵循特定的组件，例如一个文本框。目前，它被设置为页面上的特定坐标，并显示为出现在文本框的正下方。但是当文本框上方的div被折叠/展开时（即它在文本框上方/下方），它就不再那样了。

将其视为搜索按钮后出现在搜索结果框下的搜索结果区域，但搜索结果区域在搜索文本框上方的随机div折叠/展开时移动。

我很确定一些javascript会解决这个问题。我试着谷歌搜索它，但努力想出合适的关键词（我的搜索短语并没有真正回报我）。

有问题的div / span动态地在jQuery中呈现。我想知道快速解决方案是什么样的？

感谢。

Answer 1

我“想”我理解你的问题......你能不能将文本框和div / span包装在另一个div中，而是将其放在那里，以便它跟随？

javascript解决方案不是很漂亮，因为每次折叠另一个div或页面上任何会影响文本框位置的更改时，您都必须重新定位“results”div。如果这是你想要做的，那么你可以使用offset（）函数。

var myInputOffset = $('#MyTextBoxID').offset(); // Get the position of the input field relative to the document
$('#MyDivID').css({top: myInputOffset.top + 50; left: myInputOffset.left }); // Position the div

注意：div应该是绝对的，50是一个任意数字，可以将它向下移动到低于输入字段。

Answer 2

你想要这样的东西：

$('<div>Search completed</div>').insertAfter('#searchBox');

这将在<textarea>之后立即插入DIV，其ID为“searchBox”。

Answer 3

对于文本框和搜索结果区域上方的div，在“缩小”而不是根本不存在时隐藏它。我认为这可能有助于保持现状。

听起来好像文本框停留在同一个位置而底部div正在出现？如果是这样，文本框周围是否有任何可能使其表现的方式？ （或者文本框是向上移动而底部div是否更高？）

Also see CSS position property

  

修复 - 绝对生成   定位元素，定位   相对于浏览器窗口。该   元素的位置用。指定   “左”，“上”，“右”，和   “底部”属性

无论周围的内容发生什么变化，您都可以使用它来保持底部div。