Javascript 搜索/筛选下拉列表关闭任意位置

我从w3school得到了这个下拉列表，但只有当你再次点击按钮时，下拉列表才会关闭。如何通过单击除“搜索”和“下拉”之外的任何位置来关闭它

/*当用户单击按钮时， 在隐藏和显示下拉内容之间切换*/ 函数myFunction{ document.getElementByIdmyDropdown.classList.toggleshow； } 函数过滤器函数{ var输入、滤波器、ul、li、a、i； 输入=document.getElementByIdmyInput； filter=input.value.toUpperCase； div=document.getElementByIdmyDropdown； a=div.getElementsByTagNamea； 对于i=0；i-1{ a[i].style.display=； }否则{ a[i].style.display=none； } } } .dropbtn{ 背景色：4CAF50； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； 光标：指针； } .dropbtn:悬停，.dropbtn:焦点{ 背景色：3e8e41； } 我的输入{ 边框框：框大小； 背景图片：url'searchicon.png'； 背景位置：14px 12px； 背景重复：无重复； 字体大小：16px； 填充：14px 20px 12px 45px； 边界：无； 边框底部：1px实心ddd； } myInput:focus{outline:3px solid ddd；} .下拉列表{ 位置：相对位置； 显示：内联块； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：f6f6f6； 最小宽度：230px； 溢出：自动； 边框：1px实心ddd； z指数：1； } .下拉内容a{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } .下拉列表a:悬停{背景色：ddd} .show{display:block；} 搜索/筛选下拉列表 单击按钮打开下拉菜单，并使用输入字段搜索特定的下拉链接

下拉列表

---

将事件侦听器添加到删除show类的主体。。您可能希望确保目标不是按钮或输入

document.body.addEventListener("click", function(e){
  if(!e.target.classList.contains("dropbtn") && e.target.id != "myInput")  document.getElementById("myDropdown").classList.remove("show");
});

document.body.addEventListener单击，函数E{ 如果！e.target.classList.containsdropbtn&&e.target.id！=myInput document.getElementByIdmyDropdown.classList.removeshow； }; /*当用户单击按钮时， 在隐藏和显示下拉内容之间切换*/ 函数myFunction{ document.getElementByIdmyDropdown.classList.toggleshow； } 函数过滤器函数{ var输入、滤波器、ul、li、a、i； 输入=document.getElementByIdmyInput； filter=input.value.toUpperCase； div=document.getElementByIdmyDropdown； a=div.getElementsByTagNamea； 对于i=0；i-1{ a[i].style.display=； }否则{ a[i].style.display=none； } } } .dropbtn{ 背景色：4CAF50； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； 光标：指针； } .dropbtn:悬停，.dropbtn:焦点{ 背景色：3e8e41； } 我的输入{ 边框框：框大小； 背景图片：url'searchicon.png'； 背景位置：14px 12px； 背景重复：无重复； 字体大小：16px； 填充：14px 20px 12px 45px； 边界：无； 边框底部：1px实心ddd； } myInput:focus{outline:3px solid ddd；} .下拉列表{ 位置：相对位置； 显示：内联块； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：f6f6f6； 最小宽度：230px； 溢出：自动； 边框：1px实心ddd； z指数：1； } .下拉内容a{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } .下拉列表a:悬停{背景色：ddd} .show{display:block；} 搜索/筛选下拉列表 单击按钮打开下拉菜单，并使用输入字段搜索特定的下拉链接

下拉列表