如何實現點選頁面空白處使彈框消失？

最近做專案，需要實現一個效果，就是“下拉框”或者彈框展開/顯示之後，並不選擇其中一個下拉選項，點選頁面空白處，就使下拉框或者彈框收起/隱藏。
如果是select標籤的話，就很簡單了，select失去焦點的時候，select自己會收起。但是實際專案中，select並不能滿足全部的需要，有時我們需要用ul、li來模擬下拉框。還有些彈框，點選空白處使彈框消失，可以簡化使用者操作，進而提高使用者體驗。如果不用外掛的話，怎麼實現這種效果呢？

如上圖，本文實現的效果是，點選箭頭1的設定圖示，箭頭2的彈框toggle，在箭頭2的彈框顯示時候，點選頁面的其他部分，箭頭2的彈框也會隱藏。
HTML佈局和css樣式就不再貼程式碼了，重點看一下給箭頭1繫結的js事件：

$('.setIcon').on('click',function (event) {
    event.stopPropagation();//阻止事件冒泡
    $(this).siblings('.settingDiv').toggle();
    //點選空白處，下拉框隱藏-------開始
    var tag = $(this).siblings('.settingDiv');
    var flag = true;
    $(document).bind("click",function(e){//點選空白處，設定的彈框消失
        var target = $(e.target);
        if
 
(target.closest(tag).length == 0 && flag == true){
            $(tag).hide();
            flag = false;
        }
    });
    //點選空白處，下拉框隱藏-------結束
});

程式碼說明（附下圖）：
1、(′.setIcon′)指的是設置的圖標，${(}^{\prime }.setIco{n}^{\prime })指的是設置的圖標，$(‘.settingDiv’)指的是設定的彈框，即上圖箭頭2所指的彈框。
2、由於給(document)綁定了click事件，所以如果其他地方有需要給$(documen$

個人微信公眾號：小禾子的魔法盒子，歡迎關注！