Question

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

我希望在点击按钮时显示此菜单，当我点击它时，我会消失。这是我目前要让用户点击它之后消失的消息：

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

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

这很有效。但是，仅当过滤器为空时。因为有趣的是，当我添加一个输入字段并单击它。当然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

jQuery单击外部关闭过滤器

1 个答案: