如何在点击屏幕上的任何位置时隐藏特定的div

Question

我有一个搜索结果div，它包含根据用户搜索的搜索结果列表项。但我希望在用户点击屏幕上的任何位置时隐藏该结果div。

这是我的搜索div代码：

<div id="user_search">
    <div class="inpt-head-place" style="width:9em;">
        <?php echo form_open( '',[ 'class'=>' navbar-left navbar-change','id'=>'search_form']) ?>
        <?php echo form_input([ 'type'=>'text','class'=>'form-control form-media search_user_bar','placeholder'=>'Search Here','name'=>'search']); ?>
    <div id="search_result" class="search_result"> </div>

    </div>
    <div class="inpt-head-place" style="width: 20px;">
        <button class="btn btn-default btn-resize" type="submit" name="submit" id="submit_here"> <i class="fa fa-search"></i> </button>
        <?php echo form_close(); ?>
    </div>
</div>

以下是搜索栏的Snap及其结果：

请建议我..谢谢

Answer 1

您可以通过将点击绑定到document或body来检查点击的元素或任何子元素是单击的元素还是单击的子元素：

$(document).on('click', function(e) {
  if (!$('#search_result').is(e.target) && $('#search_result').has(e.target).length === 0){
    $('#search_result').hide();
  }
});

Answer 2

检查以下代码，当您点击search_result外部时，它会隐藏search_result div。

$(document).mouseup(function (e) {
    var container = $("#search_result"); //ID of dic you want to hide 
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Answer 3

你可以使用JS来执行此操作，方法是将div包裹在div中（或者只使用正文），然后在该div上添加一个on click事件监听器，如果单击正文则关闭搜索结果。 像是，

document.getElementById('body-div').addEventListener("click", function(){
    //set style of search result to display: none or hide in some reasonable way
});