Javascript 单击输入字段时切换显示样式

我想显示一个动态生成的列表，只要我的这个特定的输入字段处于活动状态，但当我在输入框外单击时，列表就会隐藏。当您运行“剪下”列表时，无论输入字段是否聚焦或单击，都会显示该列表，我希望在未聚焦时将其隐藏

到目前为止，我已经尝试实施它，但这是行不通的

$（“#拾取输入”）。单击（函数（）{
var num=$（this.find（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.toggleClass（“单击显示”）；
}
});
.suggestbox{
溢出：自动；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
}
。单击显示{
显示：块；
}

搜索

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7

尝试聚焦和模糊事件：


$（“#拾取”）.on（'focus'，function（）{
var num=$（this.nexist（'form'）.find（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.addClass（“单击显示”）；
}
});
$（“正文”）。在（'click'，函数（e）{
if（$（e.target）.closest（'ul.suggestbox，#pickup'）.length==0）{//检查所选元素是输入还是列表
var num=$（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.removeClass（“单击显示”）；
}
}
});
.suggestbox{
溢出：隐藏；
身高：0；
背景色：#f9f9f9；
最大宽度：170px；
边际上限：0；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
}
。单击显示{
显示：块；
高度：自动；
}
身体{
高度：400px；

搜寻


选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7

尝试聚焦和模糊事件：


$（“#拾取”）.on（'focus'，function（）{
var num=$（this.nexist（'form'）.find（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.addClass（“单击显示”）；
}
});
$（“正文”）。在（'click'，函数（e）{
if（$（e.target）.closest（'ul.suggestbox，#pickup'）.length==0）{//检查所选元素是输入还是列表
var num=$（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.removeClass（“单击显示”）；
}
}
})；
.suggestbox{
溢出：隐藏；
身高：0；
背景色：#f9f9f9；
最大宽度：170px；
边际上限：0；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
}
。单击显示{
显示：块；
高度：自动；
}
身体{
高度：400px；

搜寻


选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7

美元（这个）不是你想象的那样

我想你是有意这么做的：


$（函数（）{
$（“拾取”）。关于（“聚焦”，函数（）{
var$list=$（this）.closest（“.input field”）.find（“ul.suggestbox”）；
$list.toggle（$list.length>0）；//如果它不是空的，则显示它
}).on（“模糊”，函数（）{
var$list=$（this）.closest（“.input field”）.find（“ul.suggestbox”）；
$list.hide（）；//隐藏此列表
}).focus（）；
})；
.suggestbox{
溢出：自动；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
利润上限：-3px；
}

搜索

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7

美元（这个）不是你想象的那样

我想你是有意这么做的：


$（函数（）{
$（“拾取”）。关于（“聚焦”，函数（）{
var$list=$（this）.closest（“.input field”）.find（“ul.suggestbox”）；
$list.toggle（$list.length>0）；//如果它不是空的，则显示它
}).on（“模糊”，函数（）{
var$list=$（this）.closest（“.input field”）.find（“ul.suggestbox”）；
$list.hide（）；//隐藏此列表
}).focus（）；
})；
.suggestbox{
溢出：自动；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
利润上限：-3px；
}

搜索

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7

您可以捕获文档上的点击事件，如果
#拾取
处于活动状态，则显示列表：


$（文档）。在（“单击”，函数（）上）{
var num=$（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.toggle（$（“#拾取”）.is（“：焦点”）|$（“.suggestbox”）.is（“：悬停”）；
}
})；
.suggestbox{
溢出：自动；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
填充：1px 1px；
z指数：1；
显示：无；
}

搜索
项目1
项目2
您可以捕获文档上的点击事件，如果
#拾取
处于活动状态，则显示列表：


$（文档）。在（“单击”，函数（）上）{
var num=$（“ul.suggestbox”）.length；
如果（数值>0）{
$（“.suggestbox”）.toggle（$（“#拾取”）.is（“：焦点”）|$（“.suggestbox”）.is（“：悬停”）；
}
})；
.suggestbox{
溢出：自动；