jQuery外をクリックしてフィルタを閉じる

Question

私はサイドフィルタを持っています。ここでは、ユーザがいくつかの情報を記入し、ウェブページをフィルタすることができます。

ボタンをクリックするとこのメニューが表示され、そのメニューをクリックすると消えます。これは、ユーザーがフィルタの外側をクリックするとフィルタが消えるようにしなければならないものです：

​​

これは機能します。ただし、フィルタが空の場合のみ。楽しいことは、入力フィールドを追加してクリックするときです。もちろん、Jqueryはそれをフィルタであると認識せず、閉じます。

このようなことを行うにはどうすればよいですか？私が見つけたのは上記の解決策ですが、指摘したように、これは実際には適合しません。

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