0

Tengo el siguiente boton: es un dropdown, no pongo el codigo completo por que no es necesario.

 <button type="button" onclick="dropdownEvent(this);" class="btn btn-link text-default btn-herramienta" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Color de fondo
                        </button>

El dropdown funciona bien, lo que quiero es evitar que se cierra automaticamente cuando le doy click dentro de el y cuando se de click fuera de el pues que se cierre, como haria eso? gracias.

introducir la descripción de la imagen aquí

3
  • Buenas. Necesitamos el código de jQuery o JS que estés usando para poder corregirlo. Solo has puesto el html. Un saludo. Commented el 12 mar. 2019 a las 17:13
  • Amigo el codigo que se encarga de abrir el dropdown es de bootstrap, yo no estoy agregando un codigo adicional, lo que quiero es evitar que se cierre al hacer click dentro de el, eh estado investigando y no encuentro nada relacionado, tu no tienes idea de alguna funcion js? gracias. Commented el 12 mar. 2019 a las 17:23
  • Has mirado lo que hace la función que tienes en tu código? Lo mismo la puedes retocar para que te funcione como quieres. Commented el 12 mar. 2019 a las 17:29

1 respuesta 1

2

Cogí el código de ejemplo de dropdown de bootstrap de la siguiente pagina

$('.dropdown-menu').on('click', function (e) {
  e.stopPropagation();
  console.log(`${e.target.textContent} clicado!`);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ejemplo dropdown
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Primera opcion</a></li>
    <li><a href="#">Segunda opcion</a></li>
    <li><a href="#">Tercera opcion</a></li>
  </ul>
</div>

La idea es que debes "capturar" cuando haces click y cancelar la desaparición del elemento, sustituyendolo por lo que quieras.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.