<!DOCTYPE html>
<html>
<head>
<title>
How to avoid dropdown menu to close
menu items on click inside ?
</title>
<style>
.dropbutton {
background-color:
#4CAF50;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropbutton:hover, .dropbutton:focus {
background-color:
#3e8e41;
}
.dropdownmenu {
position: relative;
display: inline-block;
outline: none;
}
.dropdownmenu-content {
display: none;
position: absolute;
background-color:
#f9f9f9;
min-width: 140px;
overflow: auto;
box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
}
.dropdownmenu-content a {
color: black;
padding: 12px 14px;
text-decoration: none;
display: block;
}
.dropdownmenu a:hover {
background-color:
#f1f1f1
}
.show {
display:block;
}
</style>
</head>
<body style=
"text-align:center;"
>
<h1 style=
"color:green"
>GeeksforGeeks</h1>
<p>
Clicking outside will close
the drop down menu.
</p>
<div class=
"dropdownmenu"
>
<button onclick=
"btnToggle()"
class=
"dropbutton"
>
Dropdown
</button>
<div id=
"Dropdown"
class=
"dropdownmenu-content"
>
<a href=
"#Java"
>Java</a>
<a href=
"#HTML"
>HTML</a>
<a href=
"#CSS"
>CSS</a>
<a href=
"#JS"
>JavaScript</a>
</div>
</div>
<script>
function
btnToggle() {
document.getElementById(
"Dropdown"
).classList.toggle(
"show"
);
}
document.getElementById(
"Dropdown"
).addEventListener(
'click'
,
function
(event) {
alert(
"click outside"
);
event.stopPropagation();
});
window.onclick =
function
(event) {
if
(!event.target.matches(
'.dropbutton'
)) {
var
dropdowns =
document.getElementsByClassName(
"dropdownmenu-content"
);
var
i;
for
(i = 0; i < dropdowns.length; i++) {
var
openDropdown = dropdowns[i];
if
(openDropdown.classList.contains(
'show'
)) {
openDropdown.classList.remove(
'show'
);
}
}
}
}
</script>
</body>
</html>