Как закрывать меню при нажатии в не дива на чистом js?

162
22 сентября 2021, 02:00

function f1() { 
    var a = document.getElementsByClassName("car")[0]; 
    display = a.style.display; 
    if (display == "none") { 
      a.style.display = "block"; 
    } else { 
      a.style.display = "none"; 
    } 
}
<div class="car" style="display: none;">car</div> 
<button onclick="f1()">Close / Open</button>

Знаю что этот вопрос был много раз задан, но решение я находил только с помощью jQuery, я ещё эту библиотеку не изучал, поэтому хотелось бы узнать, как можно это решить с помощью чистого js? Буду очень благодарен.

Answer 1

function f1() { 
var a = document.getElementsByClassName("car")[0]; 
  display = a.style.display; 
  if (display == "none") { 
    a.style.display = "block"; 
  } else { 
    a.style.display = "none"; 
  } 
} 
 
function CloseClickOutside(e) { 
    if(!e.target.matches('button')) { 
        document.getElementsByClassName("car")[0].style.display = 'none'; 
    } 
} 
document.addEventListener('click', CloseClickOutside); 
document.addEventListener('touchstart', CloseClickOutside);
<div class="car" style="display:none">car</div> 
<button onclick="f1()">Close/Open</button>

Answer 2

var a = document.getElementsByClassName("car")[0]; 
   
function f1() { 
  display = a.style.display; 
  if(display == "none") { 
    a.style.display = "block"; 
  } else { 
    a.style.display = "none"; 
  } 
} 
 
window.addEventListener("click", function(event) {   
  if(!event.target.closest('#menu-btn')) { 
    a.style.display = "none"; 
  }  
});
<div class="car" style="display: none;">car</div> 
<button onclick="f1()" id="menu-btn">Close / Open</button>

Всё хорошо же. Потеряли ; после none.

READ ALSO
Вывести объекты на страницу [закрыт]

Вывести объекты на страницу [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

109
Остановка autoplay в swiper слайдер при наведении

Остановка autoplay в swiper слайдер при наведении

Хочу использовать swiper слайдерЯ уже разобрался как сделать автоматическое перелистывание картинок

96
Как найти MBR в img файле

Как найти MBR в img файле

За основу своего проекта хочу позаимствовать части исходников WinDiskImager

90
Как инициализировать пару при её создании в С++?

Как инициализировать пару при её создании в С++?

Пример инициализации обычных переменных и последовательностей, если не совсем уловили контекст вопроса:

123