Bootstrap JS Dropdown

Clases CSS Dropdown

Encontramos las siguientes clases CSS

Clase Descripción
.dropdown Indica un menu dropdown
.dropdown-item Enlaces de estilo dentro del menú desplegable con el relleno adecuado, etc.
.dropdown-item-text Texto de estilo o enlaces de texto dentro del menú desplegable con el relleno adecuado, etc.
.dropdown-menu Construye un menu dropdown
.drodpdown-menu-right Menú dropdown a la derecha
.dropdown-header Añade un encabezado dentro del menú
.dropup Indica un menu dropup (menú hacia arribaa)
.disable Deshabilita un elemento del menú dropdown
.active Habilita un elemento del menú dropdown
.divider Separa elementos del menú con una línea horizontal

Ejm

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

Atributos vía data-*

Agrega data-toggle = «dropdown» a un enlace o un botón para alternar un menú desplegable.

Ejm

<button type=»button» class=»dropdown-toggle» data-toggle=»dropdown»>Dropdown Example</button>

Vía Javascript

También lo puedes hacer manualmente con código Javascript.

Ejm

$('.dropdown-toggle).dropdown();

Ejm de código completo

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Enable Via JavaScript</h2>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <p><strong>Note:</strong> The data-toggle="dropdown" attribute is required regardless
  of whether you call the dropdown() method.</p>
</div>

<script>
$(document).ready(function(){
  $(".dropdown-toggle").dropdown();
});
</script>

</body>
</html>

Nota: El atributo data-toggle = «dropdown» es obligatorio independientemente de si llama al método dropdown ().

Métodos dropdown

La siguiente tabla lista todos los posibles métodos dropdown

Método Descripción
.dropdown(«toggle») Alterna el menú desplegable. Si está configurado, abrirá el menú desplegable de forma predeterminada
.dropdown(«update») Actualiza la posición del menú desplegable de un elemento
.dropdown(«dispose») Destruye el menú desplegable de un elemento

Eventos dropdown

La siguiente tabla lista todos los posibles eventos dropdown.

Evento Descripción
show.bs.dropdown Se produce cuando el menú desplegable está a punto de mostrarse.
shown.bs.dropdown Se produce cuando el menú desplegable se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.dropdown Se produce cuando el menú desplegable está a punto de ocultarse
hidden.bs.dropdown Se produce cuando el menú desplegable está completamente oculto (después de que se hayan completado las transiciones CSS)

Consejo: Usa el evento event.relatedTarget de jQuery para obtener el elemento que activó el menú desplegable:

$(".dropdown").on("show.bs.dropdown", function(event){
  var x = $(event.relatedTarget).text(); // Get the text of the element
  alert(x);
});