javascript - 如何在使用 div 的类时将 "display: none"应用到 div 的单击事件上

Question

你好我有一些用于 Bootstrap 下拉的脚本，我想通过脚本在我的 div 上应用“显示:无”样式我已经尝试了以下脚本

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');
}
});

我想在 (li.dropdown.mega-dropdown) 的点击事件上应用 (modal.style.display = "block";)。

Answer 1

我自己做了，我在脚本中缺少 if 条件，这是我的正确答案。 [演示][1]

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