#javascript
Вопрос:
При просмотре на мобильном устройстве появляется меню гамбургеров, и пользователь нажимает на значок, который он открывает, когда вы нажимаете значок закрыть. он закрывается.
Я пытаюсь разрешить пользователям нажимать за пределами меню, чтобы закрыть меню. К сожалению, код JS, приведенный выше, позволяет пользователям нажимать в любом месте сайта, открывать и закрывать меню. Я не хочу этого, я просто хочу, чтобы меню закрывалось, когда пользователь нажимает за его пределами.
Как я могу этого достичь? Любая помощь приветствуется.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
Проблема, которую я пытаюсь решить, находится на моем веб-сайте
Краткие сведения:
Меню гамбургеров активируется одним щелчком мыши в любом месте сайта.
Комментарии:
1. Не уверен, что вы пытаетесь сделать, не могли бы вы сделать фрагмент своей попытки или дать больше контекста?
2. Следовало бы получше объясниться. Я действительно использовал JavaScript, скорее, используя этот код.
document.querySelector('#bg-close').addEventListener('click', function() { document.querySelector('.nav').classList.toggle('nav-container') })Попытка закрыть меню гамбургеров щелчком мыши за пределами текущего класса. Я обновил свой веб- сайт , где приведен пример того, что я пытаюсь сделать. Хотя это открывает меню щелчком мыши в любом месте. Пытаюсь остановить это. Спасибо3. Я пытаюсь понять, чего ты хочешь, но я все еще не уверен. Рассматривали ли вы возможность использования начальной загрузки для своего проекта? Это намного проще реализовать, и вы можете играть с классными событиями JS. Взгляните на эти навигационные панели с адаптивным меню гамбургеров getbootstrap.com/docs/4.1/components/navbar
4. Ценю это, я слишком далеко зашел в своем проекте, чтобы внедрять bootstrap. Я объясню это так просто, как только смогу. При просмотре на мобильном устройстве отображается меню гамбургеров. Когда вы нажимаете на значок, он открывается, когда вы нажимаете на значок закрыть. он закрывается. Я пытаюсь разрешить пользователям нажимать за пределами меню, чтобы закрыть меню. К сожалению, код JS, приведенный выше, позволяет пользователям нажимать в любом месте сайта, открывать и закрывать меню. Я не хочу этого, я просто хочу, чтобы меню закрывалось, когда пользователь нажимает за его пределами.
5. Вам не нужно использовать jQuery для этой задачи. Просто используйте обычный JS.
Ответ №1:
Вы можете реализовать что-то вроде приведенного ниже:
Он использует оператор if, чтобы увидеть .nav-open , активен ли класс, в случае, если его там нет, ничего не произойдет. В противном случае он будет удален.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
}); *{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div> Комментарии:
1. Действительно ли jQuery необходим для такой простой задачи?
2. Я попытался использовать Jquery в первую очередь, затем использовал JS, отсюда и редактирование в OP. Это сработало идеально, просто исследовал, что делает attr.
3. @Джаррод Хадсон 1. В селекторах css замените дефис подчеркиванием. 2. Затем попробуйте это (ванильный JS).:
bg_close.onclick = () => {if (navElement_id.classList.contains('nav_open')) navElement_id.classList.remove('nav_open');}4. @JarrodHudson метод
attr()jQuery очень удобен. Хорошо осознавать это.5. @JarrodHudson Еще более простое решение с использованием дополнительной цепочки :
bg_close.onclick = () => navElement_id?.classList.remove('nav_open');.