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

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

当前，如果将鼠标悬停在

#搜索btn

上，将同时显示

#搜索容器

和

#搜索结果

。如果单击除

#搜索容器

之外的任何位置，两者都将消失

我想这样我就可以点击

#搜索结果

，而不会同时消失

小提琴：

HTML:

---

虽然我不喜欢隐藏搜索字段的想法；）您的项目可能需要它，在上面的示例中，使用

.on（“focusout”，function…

完成这项工作。作为优化，我建议将它们包装在一种容器中，不要调用show（）和hide（）每次迭代至少两次…

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

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

请参阅修改后的fiddle:

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

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

---

这样，只有当用户单击除searchResults元素之外的任何内容时，您才执行该操作。

替换并使用$（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

---

我希望这对你有帮助，

你真的需要点击外部隐藏吗？你可以用另一个按钮隐藏它们。我正在将.psd转换为html/css。没有关闭按钮。回答很好。我在网上搜索如何点击div。但我忘了这可以通过使用DOCUMENT来完成。做得好。似乎不起作用。如果我点击任何地方。嗨@Rudolph，抱歉，我刚刚修改了我的示例，因为它是双负的（如果不等于），而不是（如果不等于）。现在应该可以了。祝你好运！

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

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