当搜索字段失去焦点时，使搜索菜单消失，但仍允许用户单击链接 [英] Make a search menu disappear when the search field loses focus, but still allow user to click on links

问题描述

在我的网站上我有一个搜索框（文本输入字段）。
当用户点击它并开始输入文本时，会出现一个链接菜单。
菜单通过JQuery显示 - 以下命令使菜单显示：

On my website I have a search box (text input field). When the user clicks on it and starts typing text a menu of links appears. The menu appears via JQuery - The following command makes the menu appear:

".focus(function() {
    $("#instant_search_wrapper").show();
}); "

当用户点击搜索框时，我希望菜单消失。

When the user clicks off the search box, I would like the menu to disappear.

最简单的方法是使用以下命令：

The easiest way of doing this would be to be use the following command:

".blur(function() {
    $("#instant_search_wrapper").hide();
});" 

但是，如果我这样做，那么当用户点击菜单中的链接时，文本输入字段失去焦点，因此菜单在用户进入选择页面之前消失。
如果搜索字段失去焦点，我怎样才能使菜单消失（但如果用户在搜索字段失去焦点之前点击链接，他/她仍然可以被带到链接）？

However, if I do this, then when the user clicks on a link in the menu, the text input field loses focus and so the menu disappears before the user is taken to the select page. How can I make it so the menu disappears when the search field loses focus, (but if the user clicks on a link before the search field loses focus, s/he is still able to be taken to the link)?

推荐答案

您需要将点击绑定到正文以隐藏

You need to bind the click to body for hiding

$(document).click(function() {
      $("#instant_search_wrapper").hide();

});

这篇关于当搜索字段失去焦点时，使搜索菜单消失，但仍允许用户单击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！