Как закрыть мобильную навигационную панель после нажатия

Question

Я делаю сайт и мне нужна помощь с навигационной панелью для мобильного устройства.По сути, я хочу закрыть навигацию при нажатии, например, "Destaques" .Все, что мне нужно сделать, это удалить класс «открыл», когда я нажал на любую ссылку.поскольку это только одна страница, она никогда не перенаправляется на любую другую страницу.

Я пытался изменить с помощью функции .click и getElement по Id, но не сработало, поэтому я нажимаю <a>, но хочу изменитькласс для <nav> от <nav class="nav1 opened" до <nav class="nav1" Вот пример моего кода.

<nav class="nav1" id="nav-mobile">
    <a class="mobile_menu_close"></a>
        <div class="container">
            <div class="flex">
                 <ul class="nav1_links">
                        <li class="links-header"><a href="#contact"> Contact</a></li>
                 </ul>
            </div>
       </div>
</nav>

У кого-нибудь есть решение для этого, я пробовал, вероятно, 20 разных способов, но ненашел енчера.

Answer 1

Попробуйте это

$('a').click(function(e){
   e.preventDefault(); 
   $(this).closest(".nav1").removeClass("opened");
})

Answer 2

Если вы используете jQuery, вы можете сделать это

$( ".nav1" ).removeClass("opened");

Answer 3

Луис,

Я настроил для вас код, который добавит / удалит .open класс.Все в штатном JS.Это может быть применено к вашей иконке гамбургера вместо кнопки для события открытия клика и каждого <li> для события закрытия.

The Fiddle

Answer 4

Этого не произойдет, потому что когда вы нажимаете на <a> теги, которые содержат href атрибут, страница обновляется и коды JavaScript не работают, вы должны использовать «кнопку закрытия», используя тег <button> вместо <a> теги