Чтобы скрыть несколько элементов при клике вне них в JavaScript, нам нужно выполнить следующие шаги:
1. Создайте обработчик события click для всего документа, который будет вызываться при клике в любом месте на странице.
2. Внутри обработчика события click получите ссылку на элемент, на который был произведен клик, с помощью свойства event.target объекта события.
3. Проверьте, является ли элемент, на который был произведен клик, одним из тех элементов, которые вы хотите скрыть. Если да, то выключите свойство элемента display, устанавливая его значение на "none", чтобы скрыть элемент.
4. Если элемент не является одним из целевых элементов, не предпринимайте никаких действий.
Здесь приведен пример реализации этой функциональности на JavaScript:
// Получение всех элементов, которые должны быть скрыты var elementsToHide = document.querySelectorAll('.element-to-hide'); // Создание обработчика события click для документа document.addEventListener('click', function(event) { var target = event.target; // Проверка, является ли кликнутый элемент одним из элементов, которые должны быть скрыты if (!Array.from(elementsToHide).some(function(element) { return element.contains(target); })) { // Если кликнутый элемент не является одним из элементов, которые должны быть скрыты, скрывается каждый элемент по-отдельности elementsToHide.forEach(function(element) { element.style.display = 'none'; }); } });
В этом примере мы сначала получаем доступ ко всем элементам, которые должны быть скрыты, используя метод querySelectorAll
с CSS-селектором .element-to-hide
. Затем мы создаем обработчик события click для всего документа, который будет вызываться при клике в любом месте на странице. В обработчике мы проверяем каждый кликнутый элемент с помощью метода some
, чтобы убедиться, является ли кликнутый элемент одним из целевых элементов. Если нет, то мы перебираем каждый элемент и устанавливаем его свойство display
на значение "none", чтобы скрыть его.
Обратите внимание, что в примере использован стандартный JavaScript без использования фреймворков или библиотек. Если вы используете фреймворк, такой как jQuery, у вас могут быть доступны более простые способы достичь этой функциональности.