在外部单击时显示和隐藏

Question

I want to improve this script (ONLY WITH RAW JAVASCRIPT). It's a classic show / hide script (with onclick and classes). But when i show the div (.mini-list), the only way to hide it it's to click on the previous div ("Show me ya moves"). How to make a event listener that make this : when i click outside .mini-list, it's toogle the div if it's open. It's like every modal ever : close if we click outside.

I tested so many things, and all failed.

 function toogleClass(div, myclass) { var regex = new RegExp('\\\\b' + myclass + '\\\\b'); var hasOne = div.className.match(regex); myclass = myclass.replace(/\\s+/g, ''); if (hasOne) div.className = div.className.replace(regex, ''); else div.className = div.className + myclass; }

 .mini-menu {cursor:pointer;} .mini-show {} .mini-list {display:none} .mini-show .mini-list {display:block}

 <div class="mini-menu " onclick="toogleClass(this, 'mini-show')">Show me ya moves ! <div class="mini-list">Hi !</div> </div>

Answer 1

function hide(e){
    if(e.target.parentElement === null){
      var x = document.getElementsByClassName("mini-menu")[0];
      if(document.getElementsByClassName("mini-show").length>0)
        toogleClass(x, 'mini-show');
      } 
}
document.onclick = hide;

Answer 2

You can attach an event handler to the document and close the div when user clicks outside mini-menu .

 function toggleClass() { event.stopPropagation(); let div = document.getElementById('greeting'); if (div.classList.contains('mini-list')) { div.classList.add('mini-show'); div.classList.remove('mini-list'); } else { div.classList.add('mini-list'); div.classList.remove('mini-show'); } } function closeGreeting() { let div = document.getElementById('greeting'); div.classList.add('mini-list'); div.classList.remove('mini-show'); } document.getElementsByClassName('mini-menu')[0].addEventListener('click', toggleClass, false); document.addEventListener('click',closeGreeting);

 .mini-menu {cursor:pointer;} .mini-show {display:block} .mini-list {display:none}

 <div class="mini-menu">Show me ya moves ! <div id='greeting' class="mini-list">Hi !</div> </div>