jquery - 输入框下的 float 框

Question

我正在开发一个网站，根据要求，有一件事我无法找出最佳实现方式。

http://www.bodas.net/看看这个网站。您可以在首页看到一个搜索表单，关于它的“c00l”是一旦您单击该字段(“¿Que Buscas？”)，它就会弹出一个“建议”列表。 或有关相关内容的类别。

我正在尝试完成相同的行为，但要避免加载(我已经预先显示了信息)。我相信它可以通过 CSS 和隐藏的 div 或 Bootstrap 来完成。问题是，我不知道如何做到这一点。如何在输入框的精确位置下弹出一个 float 框。

有人能给我举个例子吗？提前致谢。

Answer 1

像这样的东西应该适合你。

只有CSS。基本上我们有一个包装器 div .bar 来保存输入和弹出窗口。弹出窗口有 display:none 并且当您聚焦输入时它会出现。

此外，弹出窗口的 position: absolute 始终相对于包装器 div .bar。

.popup {
  display: none;
  width: 300px;
  height: 300px;
  background-color: red;
  position: absolute;
  top: 30px;
  left: 20px;
}
.foo:focus + .popup {
  display: block;
}
.bar {
  display: inline-block;
  position: relative;
}

<div class="bar">
  <input type="text" class="foo">
  <div class="popup"></div>
</div>
<div class="bar">
  <input type="text" class="foo">
  <div class="popup" style="background-color: gray;"></div>
</div>