javascript - 单击屏幕上的任意位置时如何隐藏特定的 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>

这是带有结果的搜索栏快照:

请建议我..谢谢

Answer 1

您可以通过将点击绑定(bind)到 document 或 body 来检查被点击的元素或任何子元素是否是被点击的元素或被点击元素的子元素:

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