Question

在我的网站上，我有一个自动完成搜索。如果我开始输入要搜索的内容，它会将带有Ajax的记录放入#country_list_id div中。

现在，如果我想用结果隐藏该div，则可以通过从文本输入中删除关键字来做到这一点。

如何通过单击页面背景或网站上的其他元素来隐藏它？

<div class="input-group stylish-input-group bc-wrapper">
                        <input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
                        <span class="input-group-addon">
                            <button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
                        </span>
                    </div>
                    <div class="bc-menu list-group" id="country_list_id"></div>




function autocomplet()
{
    var min_length = 2;
    var keyword = $.trim($('#country_id').val());
    if (keyword.length >= min_length)
    {
        $.ajax({
            url: 'files/search.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#country_list_id').show();
                $('#country_list_id').html(data);
            }
        });
    }
    else
    {
        $('#country_list_id').hide();
    }
}
function set_item(item)
{
    $('#country_id').val(item);
    $('#country_list_id').hide();
}

Answer 1

使用事件委托-将侦听器添加到document.body，并检查单击的目标是否在#country_list_id内部。如果没有，请隐藏#country_list_id：

$(document).on('click', (e) => {
  const { target } = e;
  if (!target.closest('#country_list_id')) $('#country_list_id').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>outer content 1 (click will hide)</div>
<div>outer content 2 (click will hide)
  <div class="bc-menu list-group" id="country_list_id">list content (click will not hide)</div>
</div>

Answer 2

尝试

使用document单击

$(document).click(function(e) {
    $('#country_list_id').hide();
});

并添加script文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以做的是向主体添加一个事件侦听器，并检查event.target是否等于您的搜索元素，如果不等于，则将其隐藏。

document.body.addEventListener('click', (e) => {
  //your logic
}

Answer 4

有两种方法：您可以切换div的CSS（单击），并使用display:none;添加/删除类，例如.hidden { display: none; } 如果您要完全隐藏div，我建议使用此方法。

如果您希望某些div保持可见，但占用了太多空间，则可以使用“ {read more” /放大/缩小效果，如this fiddle中所示（我已经发布了代码在其他答案中的其他地方，这样我就不会再发布了！）

祝你好运

通过单击页面背景隐藏div

4 个答案: