Dami Dami - 29 days ago 14
CSS Question

How to apply "display: none" on div on click event while using div's class

Hello I have some script for bootstrap dropdown, I want to apply "display: none" style on my div by script I have tried the following script

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 want to apply (modal.style.display = "block";) on (li.dropdown.mega-dropdown)'s click event.

Answer

I done my self, I m missing my if condition in script, here is my right answer . [DEMO][1]

                [1]: https://jsfiddle.net/dami_012/L7yz6v3j/3/