In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is clicked to open, the first one remains open causing the dropdowns to overlap.
The problem arises because the .is-active class assigned to indicate the open state of a dropdown does not remove the previous .is-active class when trying to open another dropdown.
Is there a solution to this issue?
$(document).ready(function() {
// Get all dropdowns on the page that aren't hoverable.
var dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
if (!el.classList.contains("is-active")) {
el.classList.toggle('is-active');
e.stopPropagation();
e.preventDefault();
}
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function(event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown is-right ">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
<span><strong class="fw900">. . .</strong></span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="javascript:void(0);" class="dropdown-item" onclick="">Delete</a>
<hr class="dropdown-divider">
<a href="javascript:void(0);" class="dropdown-item" onclick="">Edit</a>
<hr class="dropdown-divider">
<a href="javascript:void(0);" class="dropdown-item" onclick="">Approval Status</a>
</div>
</div>
</div>