javascript - jQuery 单击外部关闭过滤器

Question

我有一个侧面过滤器，用户可以在其中填写一些信息并过滤网页。

我希望此菜单在单击按钮时出现，在单击按钮外部时消失。这是我目前必须让过滤器在用户点击外部时消失的方法:

$(window).click(function(e) {
    if ((!$(e.target).hasClass("filterOverlay")) && (!$(e.target).hasClass("toggleFilterButton"))) {

        $('.filterOverlay').hide();
        $('.darkBackground').hide();
    }
});

这行得通。但是，仅当过滤器为空时。因为有趣的是，当我添加一个输入字段并单击它时。当然 Jquery 不会将其识别为 Filter 并关闭它。

处理这样的事情最好的方法是什么？我找到的只是上面的解决方案，但正如所指出的，这并不适合。

Answer 1

使用 jQuery blur()在输入框外单击时的方法。

The blur event occurs when an element loses focus.

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