Question

当用户点击输入字段和搜索结果框外，如何隐藏输入字段和搜索结果框？

目前，如果您将鼠标悬停在#search-btn上，则#search-container和#search-results都会出现。如果您点击#search-container以外的任何地方，则两者都会消失。

我希望我可以点击#search-results，而不会消失它们。

小提琴：https://jsfiddle.net/emils/d2sn7q6L/

HTML：

<div id="search-container">
  <form id="search-form">
    <input id="search" type="search">
  </form>
</div> <!-- End search-box -->

<a id="search-btn" class="search-icon" href="#">search</a>

<div id="search-results"></div> <!-- End search-results -->

JS：

var searchInput = $("#search-container");
var searchResults = $("#search-results");

var showSearchInput = function() {
  searchInput.show();
  searchResults.show();
  if(searchInput.is(":visible")) {
    $("#search").focus();
  }
};
$("#search-btn").hover(showSearchInput);

searchInput.focusout(function(e) {
  searchInput.hide();
  searchResults.hide();
});

Answer 1

您是否尝试过隐藏焦点，而是单击文档，然后排除表单或搜索结果上的点击。

 "phones before add: [{"Phone":"123456789"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"0"}]", 
  "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
  "phones before delete: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"1"}]", 
  "phones after delete: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones before add: [{"Phone":"123456789"},{"Phone":"4567890"}]", 
  "phones after add: [{"Phone":"123456789"},{"Phone":"4567890"},{"Phone":"2"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"4567890"},{"Phone":"2"},{"Phone":"3"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]", 
  "phones before delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"3"},{"Phone":"4"}]"
  "phones after delete: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"2"},{"Phone":"4"}]", 
  "phones before add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"}]", 
  "phones after add: [{"Phone":"123456"},{"Phone":"456789"},{"Phone":"47890"},{"Phone":"4"},{"Phone":"5"}]"

请参见修改过的小提琴：https://jsfiddle.net/L4ne5r2w/

Answer 2

尝试用

替换 searchInput.focusout 函数

$(document).on('click', function (e) {
    if($(e.target).attr('id') != "search-results") {
        searchInput.hide();
        searchResults.hide();
    }
});

这样，您只需在用户点击除 searchResults 元素之外的任何内容时执行操作。

Answer 3

如何更换和使用$（document）和.is（“hover”）并检查元素是否有鼠标悬停时是否有任何元素，我们可以猜测如果文档已被点击并且在当任何元素都有鼠标时，任何元素实际上都被点击了，所以它看起来像这样：

y['zonename'] = y['zonename'].str.replace('[!|@|#|$|%|&|*]', '')
y['polygonstring'] = y['polygonstring'].str.replace(' +', ' ')
y['polygonstring'] = y['polygonstring'].str.replace(' ,', ', ').str.lstrip()

我希望这可以帮助你，here are the changes

Answer 4

虽然我不喜欢隐藏搜索字段的想法;）您的项目可能需要它，在上面的示例中使用.on("focusout", function ...完成工作。作为优化，我建议将它们包装在一种容器中，至少每次迭代都不要调用show（）和hide（）两次......

当用户在其外部点击时隐藏搜索输入字段和搜索结果

4 个答案: