jQuery點擊外部關閉過濾器

Question

我有一個側過濾器，其中用戶可以填寫一些信息和過濾網頁。

我希望這個菜單在點擊一個按鈕時出現，當我點擊它時消失。這是我目前必須使過濾器消失，一旦用戶點擊它之外：

​​

這工作。但是隻有當過濾器是空的。因爲有趣的是，當我添加一個輸入字段並單擊它時。當然，Jquery並不認爲它是Filter並關閉它。

這樣的事情最好的辦法是什麼？我發現的只是上面的解決方案，但正如所指出的，這並不適合。

Answer 1

使用jQuery blur()當在輸入之外單擊時使用的方法。

當元素失去焦點時發生模糊事件。

CSS

.filter-div { 
    display: none; 
} 

HTML

<button type="button" class="btn btn-primary" id="toggleFilter">Filter</button> 

<div class="filter-div"> 
    <input type="text" class="form-control" id="filter" placeholder="Filter"> 
</div> 

JS

$('#toggleFilter').on('click', function() { 
    $('.filter-div').slideToggle(); 
    if ($('.filter-div').css('display') != 'none') { 
     $('#filter').focus(); 
    } 
}); 

$('#filter').on('blur', function() { 
    $('.filter-div').slideToggle(); 
}); 

檢查出來： JsFiddle