javascript - 点击后下拉框消失

Question

这是我在这里发表的第一篇文章，我刚刚学习 Jquery，所以请多多关照! :)

我刚刚创建了一个网站 - www.wayfairertravel.com，我的主页上有一些下拉框，用户可以在其中搜索“按风格”等...

目前，一旦打开这些框，您就必须手动关闭它们...我只是想知道是否有一种方法可以更改当前的代码，以便当用户单击页面上的其他位置时它会消失。

非常感谢任何帮助。如果您的答案能够如此精确，那就太好了 - 即在哪里更改代码以及更改为什么。

干杯，

哈利

Answer 1

通常，您可以在 body 和所需的下拉列表上添加事件:

$(document.body).on('click', function() {
    dropdown.close(); // .hide(); whatever
});
dropdown.on('click', function(event) {
    event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
});

但是，我认为您也可以使用用于 clickOutisde 事件的 jQuery 插件(它们可能像上面提到的那样工作，但您不必自己编写)。