单击即可消失下拉框

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

我接受了JakubMichá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，而不是在使用它的地方旁边。 （以后需要更改时很难找到它）