单击时显示绑定在输入框下方的复选框

Question

我正在寻找一种方法，当我单击复选框时，复选框列表会从输入框中滑出。基本上，我正在寻找的是一种创建绑定到输入框的覆盖表单的方法。这张图片显示了我在点击之前拥有的东西（左）和我想要在点击时发生的事情（右）。 现在我在点击时弹出一个引导模式，但显然这不是很用户友好。从纯 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 的 cmets 的纯 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>

Answer 2

可以使用下面的 jQuery 代码显示 DIV

$("#searchbox").focus(function(){
    $("#searchresults").show();
});

通过使用此代码，如果文本框的焦点丢失，DIV 不会消失

Answer 3

我在 cmets 的帮助下解决了这个问题。我的 CSS：

#change-search__form-container {
  position: relative;
}
#change-search__dropdown-form {
  z-index: 1;
  display: none;
  position: absolute;
  width: 300px;
  background: #fff;
  border: #000;
  border-width: 1px;
}

我的 jQuery：

$('#change-search__form-container').click(function () {
  $('#change-search__dropdown-form').show();
});

这样，容器会在单击输入框时显示，并且在我单击其他位置（例如，在其中一个复选框上）时不会消失。

Answer 4

对于一个非常相似的问题有一篇很棒的帖子： Css Focus on input div appearing

可在 Safari 中运行，很快会在 chrome 中运行。

#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }

<div id="MyDiv1">
	<input id="myInput" type="text"/>
	<div id="myDiv2">
		<label class="container">One
		  <input type="checkbox" checked="checked">
		  <span class="checkmark"></span>
		</label>
	</div>
	<div style="display:none">
		<span> aaa </span>
	</div>
</div>