Javascript 通过单击页面背景隐藏div

在我的网站上，我有一个自动完成搜索。如果我开始键入我正在搜索的内容，它会将带有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();
}

函数自动完成（）
{
var min_长度=2；
var关键字=$.trim（$（'#country_id'）.val（））；
如果（关键字.length>=最小长度）
{
$.ajax({
url:'files/search.php'，
键入：“POST”，
数据：{关键字：关键字}，
成功：功能（数据）{
$（“#国家/地区列表_id”）.show（）；
$（'country#list_id'）.html（数据）；
}
});
}
其他的
{
$（“#国家/地区列表_id”）.hide（）；
}
}
功能集\项目（项目）
{
$（'country_id'）.val（项目）；
$（“#国家/地区列表_id”）.hide（）；
}

使用事件委派-将侦听器添加到

document.body

，并检查单击的目标是否在

\country\u list\u id

内。如果没有，则隐藏

#国家/地区列表\u id

：

$（文档）.on（'click'，（e）=>{
常数{target}=e；
如果（！target.closest（'#country_list_id'））$（'#country_list_id'）.hide（）；
});

外部内容1（单击将隐藏）
外部内容2（单击将隐藏）
列表内容（单击不会隐藏）
试试这个

使用
文档
单击

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

并添加
脚本
文件

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

您可以在正文中添加一个事件侦听器，并检查
event.target
是否等于您的搜索元素，如果不是，则隐藏它

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

有两种方法：您可以为div（onclick）切换css，并使用
display:none添加/删除一个类，例如
.hidden{display:none；}
如果您想完全隐藏div，我建议使用这种方法

如果您希望某些div保持可见，但它占用了太多的空间，可以使用中所示的“read more”/放大/缩小效果（我以前在其他答案中已将代码发布到其他位置，因此我不会再发布它！）

祝你好运
下面是一个使用display隐藏div的示例：none；（这是一个单选按钮小提琴，但同样的原则适用）谢谢，没问题！