Como evitar que el boton dropdown de bootstrap se oculte al hacer click dentro de el?

publicado por: Anonymous

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

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

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í

solución

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

_x000D_

_x000D_

$('.dropdown-menu').on('click', function (e) {_x000D_
  e.stopPropagation();_x000D_
  console.log(`${e.target.textContent} clicado!`);_x000D_
});

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div class="dropdown">_x000D_
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ejemplo dropdown_x000D_
  <span class="caret"></span></button>_x000D_
  <ul class="dropdown-menu">_x000D_
    <li><a href="#">Primera opcion</a></li>_x000D_
    <li><a href="#">Segunda opcion</a></li>_x000D_
    <li><a href="#">Tercera opcion</a></li>_x000D_
  </ul>_x000D_
</div>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

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