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

【问题标题】：Hide search input field and search results when user clicks outside of them当用户在外部点击时隐藏搜索输入字段和搜索结果
【发布时间】：2022-02-10 16:24:22
【问题描述】：

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

目前，如果您将鼠标悬停在 #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();
});

【问题讨论】：

你真的需要点击外部隐藏吗？你可以使用另一个按钮来隐藏它们。
我正在将 .psd 转换为 html/css。没有关闭按钮。

标签： javascript jquery html css

【解决方案1】：

如何替换和使用 $(document) 和 .is("hover") 并检查是否有任何元素在鼠标悬停时悬停，我们可以猜测是否已单击文档并在其中任何一个元素都有鼠标的那一刻，然后实际点击了任何元素，所以它看起来像这样：

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

希望对你有帮助，here are the changes

【讨论】：

【解决方案2】：

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

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

查看修改后的小提琴：https://jsfiddle.net/L4ne5r2w/

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

很好的答案。我正在网上搜索如何单击 div。但我忘记了它可以通过使用 DOCUMENT 来完成..干得好。
似乎不起作用。如果我点击任何地方，它只会隐藏两者。
嗨@Rudolph，抱歉，我刚刚修改了我的示例，因为它是双重否定的（如果不等于）而不是（如果不等于）。现在应该可以工作了。祝你好运！

【解决方案4】：

// Hide search result when clicked outside search field
let searchInput = $(".search-container");
let searchResults = $(".search-result");
    
$(document).click(function(e) {
  if ($(e.target).closest(".search-container, .search-result").length == 0) {
    searchInput.show();
    searchResults.hide();
  } else {
    searchResults.show();
  }
});

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案5】：

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

【讨论】：