Problem with slideToggle

Question

Problem with slideToggle

Navigation

#1 by (2 votes)

1

The problem is that when I want to put myself in the search bar I hide again and I do not know how to make it stay when I'm on top of it.

    <div style="display: none;" class="input-group mb-3" id="barra">
    <input type="text" class="form-control" placeholder="Buscar..."/>
    <div class="input-group-append">
            <button class="btn btn-dark fas fa-search" type="button"></button>
    </div>
</div>

The Jquery script that I have is the following:

$(document).ready(function () {
    $("#buscador").hover(function () {
        $("#barra").slideToggle();
    });
});

The "search engine" id refers to an item in a list

javascript jquery eventos

asked by Stewie 22.10.2018 в 09:43

source

1 answer

Check only the visible checkboxes restart the loop

score 2 · Accepted Answer

I think the easiest thing in your case is to create a div container that contains both the link and the input and that you do bind to the hover event of said container in instead of the #buscador . Here is an example:

$(document).ready(function () {
    $("#container").hover(function (e) {
        $("#barra").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="buscador">Buscar</div>
  <div style="display: none;" class="input-group mb-3" id="barra">
      <input type="text" class="form-control" placeholder="Buscar..."/>
      <div class="input-group-append">
              <button class="btn btn-dark fas fa-search" type="button"></button>
      </div>
  </div>
</div>

Edit Beware of the width of container . You will have to adjust it to your content so that it does not occupy the whole width and the hover is launched when you do not want to.