slavapas · March 29, 2017 13:14
diff --git a/Hide Div When Clicked Outside It b/Hide Div When Clicked Outside It
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Vanilla Javascript DropDown Menu Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="menu-dropdown">Menu &#9660;</div>
    <div id="menuDiv-dropdown" class="invisible">
      content<br>content<br>content
    </div>

  <script src="vanilla-javascript-dropdown-menu-example.js"></script>
  </body>
 </html>

 ---------------------------
 css
 ----------------
 #menu-dropdown {
  font-size: 2em;
  color: blue;
  margin-left: 20px;
 }

 #menu-dropdown:hover {
  cursor: pointer;
 }

 #menuDiv-dropdown {
  font-size: 2em;
  padding: 10px;
  position: absolute;
  border: 1px solid blue;
 }

 .invisible {
  display: none;
 }
 ------------------------------------
 js
 -----------------
 var dropdownMenuDiv = document.getElementById("menuDiv-dropdown");
 var dropdownMenu = document.getElementById("menu-dropdown");
 // hide popup div when clicking outside the div
 // http://www.webdeveloper.com/forum/showthread.php?t=98973
 document.onclick = check;
 // Event accessing
 // http://www.quirksmode.org/js/events_access.html
 // Event properties
 // http://www.quirksmode.org/js/events_properties.html
 function check(e){
  var target = (e && e.target) || (event && event.srcElement);

  if (!checkParent(target, dropdownMenuDiv)) {
    // click NOT on the menu
    if (checkParent(target, dropdownMenu)) {
      // click on the link
      if (dropdownMenuDiv.classList.contains("invisible")) {
        // Dynamically retrieve Html element (X,Y) position with JavaScript
        // http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element
        dropdownMenuDiv.style.left = dropdownMenu.getBoundingClientRect().left + 'px';
        dropdownMenuDiv.classList.remove("invisible");
      } else {dropdownMenuDiv.classList.add("invisible");}
    } else {
      // click both outside link and outside menu, hide menu
      dropdownMenuDiv.classList.add("invisible");
    }
  }
 }

 function checkParent(t, elm) {
  while(t.parentNode) {
    if( t == elm ) {return true;}
    t = t.parentNode;
  }
  return false;
 }
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Vanilla Javascript DropDown Menu Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id="menu-dropdown">Menu ▼</div>
	<div id="menuDiv-dropdown" class="invisible">
	content<br>content<br>content
	</div>

	<script src="vanilla-javascript-dropdown-menu-example.js"></script>
	</body>
	</html>

	---------------------------
	css
	----------------
	#menu-dropdown {
	font-size: 2em;
	color: blue;
	margin-left: 20px;
	}

	#menu-dropdown:hover {
	cursor: pointer;
	}

	#menuDiv-dropdown {
	font-size: 2em;
	padding: 10px;
	position: absolute;
	border: 1px solid blue;
	}

	.invisible {
	display: none;
	}
	------------------------------------
	js
	-----------------
	var dropdownMenuDiv = document.getElementById("menuDiv-dropdown");
	var dropdownMenu = document.getElementById("menu-dropdown");
	// hide popup div when clicking outside the div
	// http://www.webdeveloper.com/forum/showthread.php?t=98973
	document.onclick = check;
	// Event accessing
	// http://www.quirksmode.org/js/events_access.html
	// Event properties
	// http://www.quirksmode.org/js/events_properties.html
	function check(e){
	var target = (e && e.target) \|\| (event && event.srcElement);

	if (!checkParent(target, dropdownMenuDiv)) {
	// click NOT on the menu
	if (checkParent(target, dropdownMenu)) {
	// click on the link
	if (dropdownMenuDiv.classList.contains("invisible")) {
	// Dynamically retrieve Html element (X,Y) position with JavaScript
	// http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element
	dropdownMenuDiv.style.left = dropdownMenu.getBoundingClientRect().left + 'px';
	dropdownMenuDiv.classList.remove("invisible");
	} else {dropdownMenuDiv.classList.add("invisible");}
	} else {
	// click both outside link and outside menu, hide menu
	dropdownMenuDiv.classList.add("invisible");
	}
	}
	}

	function checkParent(t, elm) {
	while(t.parentNode) {
	if( t == elm ) {return true;}
	t = t.parentNode;
	}
	return false;
	}