javascript - 单击时显示绑定(bind)在输入框下方的复选框

Question

我正在寻找一种方法，当我单击它时，复选框列表会从输入框中滑出。基本上我正在寻找的是一种创建与输入框绑定(bind)的覆盖表单的方法。此图像显示了我在单击之前拥有的内容(左)以及我希望在单击时发生的内容(右)。 现在我在点击时弹出了一个 Bootstrap 模式，但显然这对用户来说不是很友好。任何可行的解决方案都可以，从纯 css 到 js 包。我的前端目前只使用 html、css、js 和 jquery。

我已经尝试了以下方法，但是它通过/在已经存在的文本后面显示了我的复选框。

.change-search__form-container {
  display: none;
  position: absolute;
  width: 300px;
  background: #fff;
  border: #000;
  border-width: 1px;
}

Answer 1

基于以前的答案和 Pete 的评论的纯 css 解决方案。

#myDiv{
  display:none;
}

#myDiv:hover, #myDiv:focus-within {
  display: block;
}

#myInput:focus + #myDiv {display:block}

<input id="myInput" placeholder="search query">
<div id="myDiv">
  <input type="checkbox" id="box1">
  <label for="box1">Stuff 1</label>
  <input type="checkbox" id="box2">
  <label for="box2">Stuff 2</label>
  <br>
  <input type="checkbox" id="box3">
  <label for="box3">Stuff 3</label>
  <input type="checkbox" id="box4">
  <label for="box4">Stuff 4</label>
</div>