0

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

Мой 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');
      }
    }
  }
}
2
  • дубликаты где-то здесь 7 июн 2023 в 12:09
  • Вешай обработчик клика на весь документ... Проверяй "открыт" ли твой див. Если открыт - на нем ли клацнули... Если не на нем - "закрывай" его.
    – ksa
    7 июн 2023 в 13:29

1 ответ 1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.