jQuery klicken Sie außen, um einen Filter zu schließen

Question

Ich habe einen Seitenfilter, wo ein Benutzer einige Informationen ausfüllen und eine Webseite filtern kann.

Ich möchte, dass dieses Menü beim Klicken auf eine Schaltfläche angezeigt wird und ausgeblendet wird, wenn ich darauf klicke. Dies ist, was ich im Moment den Filter verschwinden lassen muss, wenn der Benutzer außerhalb davon klickt:

Dies funktioniert. Allerdings nur, wenn der Filter leer ist. Denn das Lustige ist, wenn ich ein Eingabefeld anschließe und darauf klicke. Natürlich erkennt Jquery es nicht als Filter und schließt es.

Was ist der beste Weg, um mit so etwas zu gehen? Alles, was ich finde, ist die obige Lösung, aber wie gesagt, passt das nicht wirklich.

Answer 1

Verwenden Sie jQuery blur() Methode für wenn Sie außerhalb einer Eingabe klicken.

Das Blur-Ereignis tritt auf, wenn ein Element den Fokus verliert.

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(); 
}); 

Überprüfen Sie es heraus: JsFiddle