Как закрыть див при клике вне этого дива

Рейтинг: 0Ответов: 1Опубликовано: 07.06.2023

Мне необходимо, чтобы если клик был по области, которая не является нашим дивом или не содержится в нем, то скрыть блок.

Мой html код (кусок):

     <div class="dropdownB">
  <button onclick="myFunctionB()" id = "dropbtnB" class="dropbtnB" width = 40px> <img src = "menu.png" width = 40px margin-left = 0px> </button>
  <div id="myDropdownB" class="dropdownB-content">
    <button onclick="main()" class="but1n" width = 100%> Главная </button> 
    <br>
    <button onclick="about()" class="but2" width = 100%> Об олимпиаде </button>
    <br>
     <button onclick="myFunction()" class="dropbtn" width = 100%> Новости </button>
  <div id="myDropdown" class="dropdown-content">
    <a href="news.html" class = 't3'>Nees 1</a>
    <a href="2022.html" class = 't4'>exc 2</a>
    <a href="2023.html" class = 't3'>exc 1</a>
  </div>
  </div>

Мой JS код (кусок, который отвечает за скрытие главного дива):

function myFunctionB() {
    document.getElementById("myDropdownB").classList.toggle("showB");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(eventB) {
  if (!eventB.target.matches('.dropbtnB')) {

    var dropdownsB = document.getElementsByClassName("dropdownB-content");
    var iB;
    for (iB = 0; iB < dropdownsB.length; iB++) {
      var openDropdownB = dropdownsB[iB];
if (openDropdown.classList.contains('showB') ) {
        openDropdown.classList.remove('showB');
      }
    }
  }
}
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0
$(document).mouseup(function (e) { // событие клика по веб-документу        
 let div = $("#id"); // тут указываем ID элемента
 if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0 // и не по его дочерним элементам) 
 { 
    div.removeClass('active'); // скрываем его/убираем класс
 }
});