Как скрывать блок по клику за его пределами?

Question

[green300]

это код показа менюшки с каждого артикла..там ссылки еще имеются - понравилось, пожаловаться, редактировать...по нажатию на них тоже менюшка должна исчезать..

<script defer type="text/javascript">
	let dropbtn = document.querySelectorAll('.dropbtn'),
		dropdown_content = document.querySelectorAll('.dropdown-content');


		for (let i = 0; i < dropdown_content.length; i++){
			dropbtn[i].addEventListener('click', function(){
				dropdown_content[i].style.display = 'block';
			})
			
		}

</script>

Comments

[Сергей delphinpro]

https://yandex.ru/search/?text=javascript+click+outside

[green300]

Сергей delphinpro, вот и смотрю..чет пока не вышло

[Шамил Халиков]

Можно сделать это с помощью css.

У элемента прописываешь position: fixed и добавляешь 2 класса: active, если показывается, hidden - чтобы меню исчезло.

.hidden {
    left: -465px; // указываешь ширину своего меню и направление,  куда оно должно исчезать
  }
  
  .active {
    left: 0;
  }

И в js описываешь логику появления/исчезания меню.

Answer 1

[Шамил Халиков]

Можно решить задачу через css стили.

1. У меню указать свойство position: fixed.
2. Создать класс active, который отвечает за то, что элемент видно.
3. Создать класс hidden, который отвечает за то, что элемент не видно.
В зависимости от видимости/невидимости меню в начале указываете один из классов по умолчанию, они должны менять друг друга при событии click на нужный элемент.
4. Указать классу hidden свойство left: -ширина меню в пикселях. Например: left: - 100px. Меню исчезнет влево и уйдет из основного потока страницы.
5. Указать классу active свойство left: 0. Т.е. меню возвращается на страницу.
Можно указать и right, зависит от того, с какой стороны будет находится меню.
6. Пример JS кода с логикой замены этих классов у элемента:

const button1 = document.querySelector('.sidebar__button');
const field = document.querySelector('.field');
const menu = document.querySelector('.menu');

button1.addEventListener('click', () => {
    menu.classList.replace('active' , 'hidden');
});

field.addEventListener('click', () => {
    menu.classList.replace('hidden', 'active');
});

Answer 2

[Stalker_RED]

Слушать клик по window, проверять был ли клик внутри менюшки или нет.
if (event.target.closest('.menu'))

Comments

[green300]

если я правильно понимаю это любой клик в окне, постоянно будет проверять эту менюшку? а с точки зрения нагрузки на сайт это не помешает?

[Stalker_RED]

green300, а у вас обычно юзеры делают миллион кликов в секунду?
Можно снимать обработчик, когда менюшку закрывает. И снова навешивать при открытии. Тогда эта проверка сработает всего один раз.

[green300]

Stalker_RED, понял..я учусь

Answer 3

[imko]

Проверить отстуствует ли целевой элемент в "пути" события https://developer.mozilla.org/en-US/docs/Web/API/E...

Comments

[green300]

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

Answer 4

[dalnick]

В чём проблема прописать функцию исчезновения менюшки через взаимодействия со стилями по getElementById?
А потом просто в документе добавить к нужным кнопкам атрибут օnclick и в нём вызывать эту функцию по нажатию.
Как бы можно без всяких слушателей и проверок с доп условиями. Я вам предложил самый лёгкий способ. Если что-то непонятно пишите

Comments

[green300]

онклик не рекомендуют

[dalnick]

green300, тогда через слушатель делай

[green300]

dalnick, ну да, через него и пытался, но видимо знаний пока маловато..сделал через жквери..пока оставлю так, потом разберусь..пока нужно делать php функционал