Hide and open div under certain conditions

Question

Hide and open div under certain conditions

Navigation

#1 by (0 votes)

1

I'm having trouble opening and closing a particular search bar.

I need to open a div while focus is in the field and take it out while it does not, but when you click on the div it is open it can not be removed or closed.

I tried to put the event in body , in a div higher but it did not work it continues closing.

Here is the code I have used:

$("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>

Inthisfirstimageitisthedivclosed,whenthefocusoninputsearchitshouldopenthesecondimage,thedivmustremainopenuntilitclickanywhereotherthandivopen.

javascript jquery

asked by anonymous 11.09.2018 / 15:03

1 answer

Code Based Configuration - EF6 Onclick to close a modal without reload

score 0 · Answer 1

You can use the mouseenter event within div to check while the mouse is in the div and thus add a class to control, for example divativa , in the mouseleave event, ie when the mouse does not is more focused on the div, it will remove the control class.

In your blur event, I only checked whether div is or not with the control class, if it is not, it can add the class to hide it.

$('.divCompleteSearch').on('mouseenter', function() {
  $(this).addClass('divativa');
})

$('.divCompleteSearch').on('mouseleave', function() {
  $(this).removeClass('divativa');
})

$("input[name='search-input']").blur( function() {     
     if(!$('.divCompleteSearch').hasClass('divativa')) {
        $(".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;
}
.divCompleteSearch {
  border: 1px solid green;
}
.outradiv {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="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> <br><br>
<div class="outradiv">
  OUTRA DIV, clique para fechar a de cima
</div>

I inserted a border into divs to make it easier to view and test.