javascript - 如果单击“提交”，如何关闭输入

Question

所以我有一个带有搜索类的提交按钮，当单击时，带有 searchBar 类的输入值为空，然后 searchBar 显示:阻止并且不提交表单。但是，如果该值仍然为空但再次单击提交(搜索)，我希望能够关闭 searchBar。

$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
    $('.searchBar').css('display', 'block');
    return false;
} else {
  return true;
}
});

HTML:

 <form id="form" action="">
  <input value="" type="text" placeholder="Product name or ID" name="search" class="searchBar" />
  <input type="submit" readonly="readonly" class="search" />
</form>

CSS:

  #form .searchBar {
  display: none;
}

Answer 1

如果我对问题的理解是正确的，您可以切换搜索框的显示来实现您所需要的

 $('.searchBar').css('display', 'block'); // instead of this


 $('.searchBar').toggle(); // put this