javascript - 单击输入字段时切换显示样式

Question

只要我的这个特定输入字段处于事件状态，我就想显示一个动态生成的列表，但是当我在输入框外单击时，列表应该被隐藏。当您运行截图时，无论输入字段是否获得焦点或是否单击，都会显示列表，我希望它在未获得焦点时隐藏。

到目前为止，我已经尝试过实现它，但这是行不通的

$("#pickup input").click(function() {
  var num = $(this).find("ul.suggestbox").length;
  if (num > 0) {
    $(".suggestbox ul").toggleClass("clickdisplay");
  }
});

.suggestbox {
  overflow: auto;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
}
.clickdisplay {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="search"><i class="material-icons">search</i>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required>
  </div>
  <ul class="suggestbox" id="sub_navlist">
<li> option 1 </li>
<li> option 2 </li>
<li> option 3 </li>
<li> option 4 </li>
<li> option 5 </li>
<li> option 6 </li>
<li> option 7 </li>
</ul>
</form>

Answer 1

$(this) 不是你想的那样。

我想你是想这样做:

$(function() {
  $("#pickup").on("focus", function() {
    var $list = $(this).closest(".input-field").find("ul.suggestbox");
    $list.toggle($list.length > 0); // show it if it is not empty
  }).on("blur", function() {
    var $list = $(this).closest(".input-field").find("ul.suggestbox");
    $list.hide(); // hide this list
  }).focus();
});

.suggestbox {
  overflow: auto;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 1px 1px;
  z-index: 1;
  margin-top:-3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="input-field" style="width: 30%">
    <label class="label-icon" for="pickup"><i class="material-icons">search</i>
    </label>
    <input id="pickup" placeholder="location" type="search" autocomplete="off" required>
    <ul class="suggestbox" id="sub_navlist">
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
      <li>option 5</li>
      <li>option 6</li>
      <li>option 7</li>
    </ul>
  </div>
</form>