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

Question

我正在寻找一种方法，当我点击它时，从输入框中滑出一个复选框列表。基本上我正在寻找的是一种创建覆盖到输入框的叠加形式的方法。此图显示了我点击前的内容（左）以及我想要点击（右）的内容。 现在我点击时会弹出一个bootstrap模式，但显然用户不是很友好。任何工作解决方案都可以，从纯css到js包。我的前端目前只适用于html，css，js＆amp; jquery的。

我已尝试过以下操作，但这会显示我已经存在的文本后面/后面的复选框。

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

Answer 1

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

＆＃13;

＆＃13;

fun intent(context: Context) = 
    Intent(context, HomeActivity::class.java)
        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK)

＆＃13;

#myDiv{
  display:none;
}

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

运行Safari并很快运行Chrome ..

＆＃13;

＆＃13;

this.form.disableValidators() // ???

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

可以使用以下jQuery代码

显示DIV

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

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

Answer 4

我在评论的帮助下解决了这个问题。我的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();
});

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