JSFiddle - React, Tailwind, and code Playground
JavaScript
window.addEventListener("DOMContentLoaded", function(){ //Запустим выполнение кода как только голый хтмл прогрузится и выполнятся скрипты если они есть перед этим кодом
var multiselect = document.querySelector(".multiselect"), //здесь ничо интересного ,цепляем по айди и селекторам
select = multiselect.querySelector(".selectBox"), //здесь ничо интересного ,цепляем по айди и селекторам
checkboxes = multiselect.querySelector("#checkboxes"); //здесь ничо интересного ,цепляем по айди и селекторам
select.addEventListener("click", function(event) { //Говорим при клике на select запускать эту функцию
checkboxes.classList.toggle("show"); //проверяем в списке checkboxes есть ли там такой класс,если нету то даем show
if(checkboxes.classList.contains("show")){ //условие сработает если оно истенное,сейчас оно даст true потому что выше toggle присвоил класс show
window.addEventListener("click", hide) //Ставим обработчик события клика на window,то есть на всю страницу сайта (куда бы я не кликнул) вызовится функция hide
}else{ //а это что?
window.removeEventListener("click", hide) //вижу что удаляет прослушку hide,но не понимаю при каких условиях?
};
});
multiselect.addEventListener("click", function(event) { // Это здесь что ли мы говорим что любой клик кроме по multiselect вызовет функцию hide?
event.stopPropagation(); //а это не вредно для Я.Метрики,корректно ли она будет данные считывать или её тоже она закроет?
});
function hide(){
checkboxes.classList.remove("show"); //вижу что удаляем класс show
window.removeEventListener("click", hide); //и прослушку этой функции,чтобы наверно рекурсии не было
};
});
ЗЫ.ваш комментарий "значит любой клик на который способна...