Los menús desplegables son un conjunto de enlaces o una lista que se muestra al hacer clic en un botón o en un evento del teclado. Bootstrap también presenta un marco para implementar menús desplegables. Pero el evento desplegable de arranque predeterminado solo ocurre con un clic del mouse.
En este artículo, veremos cómo sobrescribir esta característica predeterminada y hacer que el evento desplegable de arranque ocurra después de presionar una tecla específica.
Veamos la implementación paso a paso:
Paso 1: agregue el código HTML para crear un botón que muestre el menú desplegable
- Vincule el CSS minimizado más reciente de bootstrap al documento HTML.
- Agregue el marco del componente desplegable de arranque en el código HTML.
- El código HTML crea el menú desplegable a la perfección, pero el evento desplegable se produce con solo un clic de forma predeterminada. Para realizar este evento al presionar una tecla, debemos agregar nuestro código JavaScript adicional usando una etiqueta de secuencia de comandos.
Paso 2: agregue el código JavaScript para que se produzca el menú desplegable
- Cree una variable y tome el código clave de la clave específica como entrada.
- Cree una función llamada activarDropdown() que mostrará el menú desplegable cuando se le llame. Dentro de esa función, seleccionamos la identificación llamada #myDropdown y alternamos el estado de todas las clases (elementos desplegables) que residen dentro de ese div. Aquí alternar el estado simplemente significa ocultarlo si se muestra y mostrarlo si está oculto.
- Llame a la función cuando se presione nuestra tecla específica.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Bootstrap Latest Minified Css-->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
</head>
<body>
<!--Bootstrap Framework to create a dropdown-->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" id="myDropdown"
aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
Action
</a>
<a class="dropdown-item" href="#">
Another action
</a>
<a class="dropdown-item" href="#">
Something else here
</a>
</div>
</div>
<!-- JavaScript Code to perform the task-->
<script>
// Create a variable and take the
// key-code of the specific key as
// an input prompt
let keyToShow = prompt("Please enter the "
+ "key code, After pressing that key "
+ "dropdown will occur");
/* Create a function named activateDropdown()
that will show the dropdown menu when called.
Inside that function we selected the id named
#myDropdown and toggled the state of all the
classes (dropdown elements) residing inside
that div */
function activateDropdown() {
document.getElementById("myDropdown")
.classList.toggle("show");
}
// Call the function when our specific
// key is pressed
document.addEventListener('keydown', function(event) {
if (event.keyCode == keyToShow) {
activateDropdown();
}
});
</script>
</body>
</html>
Producción:
Explicación: dentro del video de salida, al principio, ingresamos el código de la tecla «Enter» que es igual a 13, luego, cada vez que presionamos enter en el teclado, se produce el evento desplegable. Podemos ver que el cursor del mouse también está fijo cuando ocurrió el evento desplegable.
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA