Toggle dropdown menus

by Tan

HTML

<ul>
<li class="drop"><a href="https://www.hloe.co.uk">My Link</a>
<div class="mega-dropdown">Hello</div></li>

<li><a href="https://www.hloe.co.uk">My Link</a></li>

<li class="drop"><a href="https://www.hloe.co.uk">My Link</a>
<div class="mega-dropdown"><a href="https://www.hloe.co.uk">My Link</a></div></li>
</ul>

CSS

.mega-dropdown {display:none;}
.open {display:block;background-color:#dedede;height:150px;}
.red {color:purple;}

JavaScript

var linkClass = "drop";
var dropClass_closed = "mega-dropdown";
var dropClass_open = "open";

const items = document.getElementsByClassName(linkClass);
var isOpen = false;

for(let i=0;i<items.length;i++)
{ items[i].firstChild.addEventListener('click', function(event){

event.preventDefault();
if (items[i].lastChild.className == dropClass_open) {items[i].lastChild.className = dropClass_closed;isOpen = false;}
else {
for(let i=0;i<items.length;i++)
{ items[i].lastChild.className = dropClass_closed; }
items[i].lastChild.className = dropClass_open;
isOpen = true;
}
event.stopPropagation();

}, false);

}

window.addEventListener('click', function(e){   

for(let i=0;i<items.length;i++)
if (items[i].lastChild.className == dropClass_open) { var box = items[i].lastChild;}

  if (isOpen == true && box.contains(e.target)){

   e.stopPropagation();
  } else{
  box.className = dropClass_closed;
   e.stopPropagation();
  }
  e.stopPropagation();
});