在一定条件下隐藏并打开div

Question

我在打开和关闭一个特定的搜索栏时遇到麻烦。

我需要打开一个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事件并监听页面上的任何单击。

如果您查看这把小提琴，请注意，我将所有的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>

​