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 事件插件（它们可能像上面提到的那样工作，但您不必自己编写）。

Answer 2

我接受了 Jakub Michálek 的建议并将其应用到您的代码中。我准备了小提琴，所以你可以测试一下：http: //jsfiddle.net/tmuuS/

这是您希望在您的页面上拥有的 javascript：

$(document).ready(function () {
    $("#expslider").hide();
    $("#expshower").show();
    $('#expshower').click(function () {
        $("#expslider").slideToggle();
    });

    $(document.body).on('click', function () {
        $("#expslider").slideUp();
    });
    $("#expslider").on('click', function (event) {
        event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
    });
    $("#expshower").on('click', function (event) {
        event.stopPropagation(); // prevents dropdown from getting closed when clicking on it
    });
});

尽管请记住最好在 head 标签中包含 javascript，而不是在您使用它的地方旁边。（以后需要更改时很难查找）