Hey there! I need some help with my bootstrap dropdown script. I'm trying to add a "display: none" style to my div using JavaScript. Here's the code I've been working with:
var modal = document.getElementById('black');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
$('.drp').on('hidden.bs.dropdown', function () {
modal.style.display = "none";
});
$('.drp').on('shown.bs.dropdown', function () {
modal.style.display = "block";
});
$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass("open");
modal.style.display = "block";
});
$('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
$('li.dropdown.mega-dropdown').removeClass('open');
}
});
I'm looking to trigger (modal.style.display = "block";) on the click event of (li.dropdown.mega-dropdown).