单击页面背景隐藏 div答案

【问题标题】：Hide a div with clicking the page background单击页面背景隐藏 div
【发布时间】：2018-12-07 07:28:46
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

试试这个

使用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>

【讨论】：

谢谢，没关系！

【解决方案2】：

使用事件委托 - 为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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

如果您希望某些 div 保持可见，但它占用了太多空间，您可以使用“阅读更多”/放大/缩小效果，如 this fiddle 所示（我已将代码发布在之前的另一个答案，所以我不会再发布了！）

祝你好运

【讨论】：

这是一个使用 display:none; 隐藏 div 的示例。 jsfiddle.net/RachGal/652fozjs（这是一个单选按钮小提琴，但同样适用）