<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin
=
"anonymous"
>
</
head
>
<
body
>
<
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
>
<
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
>