javascript - 我想在单击主体时关闭 div，但使用 .not( ) 或类似的简单函数省略父 div

Question

这个问题已经有答案了:

How do I detect a click outside an element? (91 个回答)

已关闭 7 年前。

当用户在搜索框中键入内容时，我会出现一个搜索建议框。我想当用户单击父 div 外部时关闭该框。我使用 .not() 尝试了下面的方法省略父 div，但它没有省略它，并且在单击父 div 时仍然关闭它。

我已经研究了使用事件传播的解决方案，但这些解决方案有其自身的危险，因此我真的很想使用像 .not() 这样的简单函数来完成此任务。

JS

// close search suggestions
    $("body").not('#searchbox').mousedown(function() {
        $('.search-suggestions').fadeOut();
    });

HTML

<section id="searchbox">
<div class="container">
<div class="row">
  <div class="col-md-12">
    <form class="form-inline clearfix">
      <div class="form-group pull-left">
        <input type="text" class="form-control" id="search-input" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default pull-right"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <div class="col-md-12 search-suggestions">
    <ul class="list-unstyled">
      <li><h4>Browse:</h4></li>
      <li class="suggestion-new-homes"><a href="#"><span class="suggestion-result">result</span> in New Homes</a></li>
      <li class="suggestion-renovation"><a href="#"><span class="suggestion-result">result</span> in Renovation</a></li>
      <li class="suggestion-interior-living"><a href="#"><span class="suggestion-result">result</span> in Interior Living</a></li>
    </ul>
  </div>
</div>

Answer 1

在搜索下拉列表打开时将点击处理程序附加到文档，在关闭时将其删除。当用户在打开的下拉列表中单击时，防止单击传播。