在特定条件下隐藏和打开 div

Question

我在打开和关闭特定搜索栏时遇到问题。

我需要在焦点在字段中时打开一个div，在没有焦点时将其取出，但是当您单击打开的div时，字段的焦点无法移除或关闭。

我尝试将事件放在正文中，在更高的 div 中但是它不起作用它继续关闭。

这是我使用的代码：

$("input[name='search-input']").blur( function() {
     $(".divCompleteSearch").addClass('hiddendiv');
});

$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

HTML：

    <div class="row align-content-center">
    <div class="col search-bar">
        <div class="col m1 icon-search-bar">
            <svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
                 style="height: 22px; width: 22px; display: block; fill: currentcolor;">
                <path
                    d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
            </svg>
        </div>
        <div class="col m11 input-search-bar">
            <input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
        </div>
    </div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
    <div class="col complete-search">
        <div class="row">
            <div class="col m3 button-search active">
                Escolas
            </div>
            <div class="col m3 button-search">
                Bairro
            </div>
            <div class="col m3 button-search">
                Telefone
            </div>
            <div class="col m3 button-search">
                Apelido
            </div>
        </div>
    </div>
</div>

在第一张图片中，div 关闭，当input search 中有焦点时，它应该打开第二张图片，div 应该保持打开状态，直到它点击不在div 内的任何地方打开。

Answer 1

您需要移除blur 事件并监听页面上的任何点击。

如果您查看 this fiddle，请注意我将所有 HTML 包装在一个名为 #search-container 的容器中。 然后在 Javascript 中，我删除了blur() 方法并在整个文档上添加了一个mouseup() 监听器。

mouseup() 事件检查用户是否单击了容器或其子项之一。如果没有，它会关闭 div。

$(document).mouseup(function(e) 
{
    var container = $("#search-container");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        $(".divCompleteSearch").addClass('hiddendiv');
    }
});

$("input[name='search-input']").focus( function() {
    $(".divCompleteSearch").removeClass('hiddendiv');
});

$(".button-search").on('click', function (e) {
    e.preventDefault();
    $("input[name='search-input']").focus();
    $(".active").removeClass("active");
    $(this).addClass('active');
});

.hiddendiv { display: none; }

#search-container {
  border:1px solid #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="search-container">
<div class="row align-content-center">
   <div class="col search-bar">
      <div class="col m1 icon-search-bar">
         <svg viewBox="0 0 16 16" role="presentation" aria-hidden="true" focusable="false"
            style="height: 22px; width: 22px; display: block; fill: currentcolor;">
            <path
               d="m2.5 7c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5m13.1 6.9-2.8-2.9c.7-1.1 1.2-2.5 1.2-4 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.5 0 2.9-.5 4-1.2l2.9 2.8c.2.3.5.4.9.4.3 0 .6-.1.8-.4.5-.5.5-1.2 0-1.7"></path>
         </svg>
      </div>
      <div class="col m11 input-search-bar">
         <input type="text" name="search-input" placeholder="Experimente Colegio São Fransisco">
      </div>
   </div>
</div>
<div class="row align-content-center divCompleteSearch hiddendiv">
   <div class="col complete-search">
      <div class="row">
         <div class="col m3 button-search active">
            Escolas
         </div>
         <div class="col m3 button-search">
            Bairro
         </div>
         <div class="col m3 button-search">
            Telefone
         </div>
         <div class="col m3 button-search">
            Apelido
         </div>
      </div>
   </div>
</div>