Снятие чекбокса при клике на пункт меню
Всем добрый вечер! Прошу помочь, есть сайт с ajax переключением страниц, на моб версии стоит бургер-меню (которое открывается на весь экран поверх всего), необходимо что бы в открытом меню при клике на любую ссылку оно автоматически закрывалось, сейчас ситуация такая что при клике на меню, ссылка открывается но она остается под слоем меню и пока сам не закроешь бургер, ничего не увидишь. Сама кнопка открыть/закрыть это чекбокс, видимо какой то скрипт нужен что бы закрыть ее не нажимая именно на крестик а на ссылку меню. Help!
|
[].forEach.call(document.querySelectorAll('a'), function (el){ el.addEventListener('click', function(){ document.querySelector('input[type="checkbox"]').checked = false; }); }); только свои селекторы укажите |
Цитата:
|
к 'a' класс ссылок или что у вас там, к 'input[type="checkbox"]' тоже самое, id чекбокса желательно.
|
Цитата:
Это добавил в head <script type="text/javascript"> [].forEach.call(document.querySelectorAll('a#stoa'), function (el){ el.addEventListener('click', function(){ document.querySelector('input[type="checkbox"]#stoa').checked = false; }); }); </script> Это код меню <label id="menu"> <input type='checkbox' class="stoa"> <span class='menus'> <span class='hamburgers'></span> </span> <ul> <li> <a href="<?php bloginfo('template_url'); ?>/football.html" class="js-click-modal stoa">Футбол</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/hockey.html" class="js-click-modal stoa">Хоккей</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/basket.html" class="js-click-modal stoa">Баскетбол</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/boks.html" class="js-click-modal stoa">Бокс</a> </li> </ul> </label> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <label id="menu"> <input type='checkbox' class="stoa" checked> <span class='menus'> <span class='hamburgers'></span> </span> <ul> <li> <a href="<?php bloginfo('template_url'); ?>/football.html" class="js-click-modal stoa">Футбол</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/hockey.html" class="js-click-modal stoa">Хоккей</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/basket.html" class="js-click-modal stoa">Баскетбол</a> </li> <li> <a href="<?php bloginfo('template_url'); ?>/boks.html" class="js-click-modal stoa">Бокс</a> </li> </ul> </label> <script> [].forEach.call(document.querySelectorAll('#menu a'), function (el){ el.addEventListener('click', function(e){ e.preventDefault(); // эту не надо document.querySelector('input[type="checkbox"].stoa').checked = false; }); }); </script> </body> </html> скрипт в конец |
Огромное спасибо!! Все работает!!
|
Часовой пояс GMT +3, время: 05:54. |