單擊即可消失下拉框

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