Мне необходимо, чтобы если клик был по области, которая не является нашим дивом или не содержится в нем, то скрыть блок.
Мой 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');
}
}
}
}