Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to avoid dropdown menu to close menu items on clicking inside?
We can use the preventDefault() method to prevent the default behavior of the click event on the dropdown menu. By doing this, the menu items will not close when clicked inside. Additionally, we can add a click event listener to the dropdown menu and set the event.stopPropagation() method to stop the event from propagating to parent elements.
HTML Dropdown
HTML dropdown is a type of form element that allows users to select one option from a list of options. It is created using the select and option tags in HTML. The "select" tag defines the dropdown container and the "option" tags define the options within the dropdown. To pre-select an option, use the selected attribute on the "option" tag. The value of the selected option can be accessed using JavaScript or by using the "name" attribute on the "select" tag.
Using stopPropagation()
One way to prevent a dropdown menu from closing when clicking inside it is to use the event.stopPropagation() method to prevent the event from bubbling up to parent elements:
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
Using preventDefault()
Alternatively, you can use event.preventDefault() to prevent the default behavior of the click event, which can also prevent the menu from closing:
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.preventDefault();
});
jQuery Approach
You can also use jQuery to achieve the same result:
$(".dropdown-menu").click(function(event){
event.stopPropagation();
});
Complete Working Example
Here's a complete example demonstrating how to create a dropdown menu that remains open when items are clicked:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown.show .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropdown()">Click Me</button>
<div class="dropdown-content">
<a href="#" onclick="selectOption('Option 1')">Option 1</a>
<a href="#" onclick="selectOption('Option 2')">Option 2</a>
<a href="#" onclick="selectOption('Option 3')">Option 3</a>
</div>
</div>
<p id="result">Selected: None</p>
<script>
function toggleDropdown() {
var dropdown = document.querySelector('.dropdown');
dropdown.classList.toggle('show');
}
function selectOption(option) {
document.getElementById('result').textContent = 'Selected: ' + option;
}
// Prevent dropdown from closing when clicking inside
document.querySelector('.dropdown-content').addEventListener('click', function(event) {
event.stopPropagation();
});
// Close dropdown when clicking outside
window.addEventListener('click', function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdown = document.querySelector('.dropdown');
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
}
}
});
</script>
</body>
</html>
Key Points
-
stopPropagation()prevents event bubbling to parent elements -
preventDefault()prevents the default action (like link navigation) - Combine both methods for complete control over dropdown behavior
- Always handle outside clicks to close the dropdown when needed
Conclusion
Using event.stopPropagation() is the most effective way to prevent dropdown menus from closing when clicking inside. This method stops the click event from reaching parent elements that might close the dropdown.
14K+ Views
