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

下拉框在点击后消失

2 个答案: