在某些情况下隐藏并打开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>