JSFiddle - React, Tailwind, and code Playground

by Aza Broflovski

HTML

<div class="dropdown">
	Button


	<div class="dropdown-menu">
		Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Заголовок скатился которой грамматики несколько что щеке, снова переулка! Взобравшись!
	</div>
</div>

JavaScript

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}
document.onclick = function (e) {
  var clicked;
  for (var element = e.target; element; element = element.parentNode) {
    if (hasClass(element, 'dropdown')) {
      iterator = element.childNodes;
      for(var i = 0; i < iterator.length; i++) {

        var elem = iterator[i];
        if (hasClass(elem, 'dropdown-menu')) {
          var isVisible = elem.offsetWidth > 0 || elem.offsetHeight > 0;
          if (!(isVisible)) {
            elem.style.display = "block";
            element.className += " dropdown-open";
            clicked = element;
          }
        }
      }
    }

  }
  var iterator = document.getElementsByClassName('dropdown');
  for (var i = 0; i < iterator.length; i++) {
    var element = iterator[i];
    initerator = element.childNodes;
    for(var x = 0; x < initerator.length; x++) {
      var elem = initerator[x];
      if (hasClass(elem, 'dropdown-menu')) {
        var isVisible = elem.offsetWidth > 0 || elem.offsetHeight > 0;
        if (isVisible && clicked != element) {
          elem.style.display = "none";
          element.className = (element.className).replace("dropdown-open","");
        }
      } 
    }
  }
}