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

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 -->

联署材料：

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

如果替换和使用$( document )和.is(“悬停”)，并检查在元素启动时是否有任何元素在悬停，我们可以猜到，如果已经单击了文档，并且在那一刻，任何元素都有鼠标，那么任何元素实际上都被单击了，所以它将如下所示：

$(document).click(function(){ //if the document has been clicked
if( !($("#search-container").is(":hover"))&&
    !($("#search-results").is(":hover"))&&
    !($("#search-btn").is(":hover"))
   )//if any of these elements have the mouse then me know the user didn't click on them
{searchInput.hide();searchResults.hide();}}//hide the boxes

我希望这能帮你，这里有一些变化

Answer 2

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

$(document).click(function(evt) {
  if ($(evt.target).closest('#search-container, #search-results').length == 0) {
    searchInput.hide();
    searchResults.hide();
  }
});

见改良小提琴：https://jsfiddle.net/L4ne5r2w/

Answer 3

尝试将您的searchInput.focusout函数替换为：

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

这样，您只在用户单击除searchResults元素以外的任何内容时才执行此操作。