Botón dropdown (desplegable) hoverable

publicado por: Anonymous

Tengo un desplegable que se abre cuando paso el ratón por encima hecho con HTML y CSS tal que así:

_x000D_

_x000D_

.dropdown {_x000D_
    position: relative;_x000D_
    display: inline-block;_x000D_
}_x000D_
.dropbtn {_x000D_
    height:30px;_x000D_
    width:160px;_x000D_
    background-color: #da291c;_x000D_
    color: #ffffff;_x000D_
    font-size: 16px;_x000D_
    border: none;_x000D_
    cursor: pointer;_x000D_
}_x000D_
.dropdown-content {_x000D_
    display: none;_x000D_
    position: absolute;_x000D_
    background-color: #653734;_x000D_
    min-width: 100px;_x000D_
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);_x000D_
    padding: 5px 7px;_x000D_
}_x000D_
_x000D_
.dropdown:hover .dropdown-content {_x000D_
    display: block;_x000D_
}

_x000D_

<div class="dropdown">_x000D_
					<button class="dropbtn"><?php echo $lang['topbar_string_1']; ?></button>_x000D_
	<div class="dropdown-content">_x000D_
		<div class="row no-margin no-padding">_x000D_
			<form>_x000D_
				<div class="col-xs-12 no-padding ">_x000D_
					<label class="white-text"><?php echo $lang['topbar_string_2']; ?></label>_x000D_
					<input type="text" class="form-control"/>_x000D_
				</div>_x000D_
				<div class="col-xs-12 no-padding ">_x000D_
					<label class="white-text"><?php echo $lang['topbar_string_3']; ?></label>_x000D_
					<input type="password" class="form-control"/>_x000D_
				</div>_x000D_
				<div class="col-xs-12 no-padding ">_x000D_
					<button class="my-btn btn-primary" type="submit"><?php echo $lang['topbar_string_4']; ?></button>_x000D_
				</div>_x000D_
				<div class="col-xs-12 no-padding ">_x000D_
					<a class="white-text" href="#"><?php echo $lang['topbar_string_5']; ?></a>_x000D_
				</div>_x000D_
			</form>_x000D_
		</div>_x000D_
	</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Pero me he topado con un problmea y esque aunque yo haga click en un input para escribir y saco el ratón fuera del contenido del dropdown, éste desaparece, y yo necesito que si yo le hago click dentro ya no desaparezca, que solo desaparezca si he pasado el ratón por encima y no he clickado nada.

solución

Utilizando jQuery puedes hacer lo siguiente:

var inputs = $(".dropdown-content input");

inputs.on("focus blur", function() {
  $(this).parents(".dropdown-content").toggleClass("open");
});

Seleccionamos los inputs dentro del contenido de tu dropdown y les asignamos dos eventos. focus cuando este enfocado el input y blur cuando pierda el enfoque.

Utilizamos la función parents() para recorrer el DOM pero con un selector para que llegue hasta .dropdown-content y después usamos toggleClass para agregar y remover la clase dependiendo si hay enfoque o no.

Clase:

.open {
  display: block;
}

FRAGMENTO DE CÓDIGO:

_x000D_

_x000D_

var inputs = $(".dropdown-content input");_x000D_
_x000D_
inputs.on("focus blur", function() {_x000D_
  $(this).parents(".dropdown-content").toggleClass("open");_x000D_
});

_x000D_

.dropdown {_x000D_
  position: relative;_x000D_
  display: inline-block;_x000D_
}_x000D_
.dropbtn {_x000D_
  height: 30px;_x000D_
  width: 160px;_x000D_
  background-color: #da291c;_x000D_
  color: #ffffff;_x000D_
  font-size: 16px;_x000D_
  border: none;_x000D_
  cursor: pointer;_x000D_
}_x000D_
.dropdown-content {_x000D_
  display: none;_x000D_
  position: absolute;_x000D_
  background-color: #653734;_x000D_
  min-width: 100px;_x000D_
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);_x000D_
  padding: 5px 7px;_x000D_
}_x000D_
.dropdown:hover .dropdown-content {_x000D_
  display: block;_x000D_
}_x000D_
.open {_x000D_
  display: block;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="dropdown">_x000D_
  <button class="dropbtn">_x000D_
    <?php echo $lang[ 'topbar_string_1']; ?>_x000D_
  </button>_x000D_
  <div class="dropdown-content">_x000D_
    <div class="row no-margin no-padding">_x000D_
      <form>_x000D_
        <div class="col-xs-12 no-padding ">_x000D_
          <label class="white-text">_x000D_
            <?php echo $lang[ 'topbar_string_2']; ?>_x000D_
          </label>_x000D_
          <input type="text" class="form-control" />_x000D_
        </div>_x000D_
        <div class="col-xs-12 no-padding ">_x000D_
          <label class="white-text">_x000D_
            <?php echo $lang[ 'topbar_string_3']; ?>_x000D_
          </label>_x000D_
          <input type="password" class="form-control" />_x000D_
        </div>_x000D_
        <div class="col-xs-12 no-padding ">_x000D_
          <button class="my-btn btn-primary" type="submit">_x000D_
            <?php echo $lang[ 'topbar_string_4']; ?>_x000D_
          </button>_x000D_
        </div>_x000D_
        <div class="col-xs-12 no-padding ">_x000D_
          <a class="white-text" href="#">_x000D_
            <?php echo $lang[ 'topbar_string_5']; ?>_x000D_
          </a>_x000D_
        </div>_x000D_
      </form>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *