Если div отключен, скрыть элемент
В настоящее время у меня есть меню, которое появляется при нажатии мобильной кнопки. Когда пользователь нажимает на div, я хочу, чтобы он скрывался. Прямо сейчас у меня есть «X», который пользователь должен щелкнуть, чтобы скрыть div. Как я могу выполнить то, что пытаюсь сделать? (Я считаю, что включил весь необходимый код, но если я что-то пропустил, дайте мне знать.)
Заранее спасибо!
HTML
<div class = "nav-mobile">
<a href = "#link1">Menu Item 1</a>
<a href = "#link2">Menu Item 2</a>
</div>
JS
if (nav-mobile) {
nav-mobile.addEventListener('click', () => {
nav.classList.toggle('active');
});
}
SCSS
(по умолчанию скрыт)
.nav-mobile {
visibility: hidden;
}
(когда активна мобильная навигация, становится видно)
&.active {
.nav-mobile {
visibility: visible;
opacity: 1;
h5:not(nav-mobile-title) {
margin: 0;
}
}
}
@SpencerMay Спасибо! В этом есть большой смысл. Я попробую это.
Возможный дубликат Используйте jQuery, чтобы скрыть DIV, когда пользователь щелкает за его пределами
Можно ли увидеть больше HTML и JavaScript, связанных с навигационным мобильным устройством?
Я бы ранее согласился с @SpencerMay, но, по моему опыту, это иногда может вызывать проблемы при попытке прокрутки на мобильном устройстве, когда иногда пользователь будет касаться вне меню для прокрутки вниз, тем самым закрывая меню. Моим 2cents было бы выполнить это с помощью JavaScript, пример которого можно найти с рекомендацией от showdev.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Теоретически я обычно добиваюсь этого, создавая
divпозади меню, которое охватывает ширину и высоту экрана. Этот div должен быть абсолютно позиционирован, если в теле нет высоты прокрутки, или фиксироваться, если вы хотите разрешить прокрутку. При щелчке по этому div (который находится где угодно, кроме меню) вы можете вызвать скрипт для удаления меню.