Форум

TSGH · #1 (**permalink**) 07.03.2018, 21:03

Всем добрый вечер! Прошу помочь, есть сайт с ajax переключением страниц, на моб версии стоит бургер-меню (которое открывается на весь экран поверх всего), необходимо что бы в открытом меню при клике на любую ссылку оно автоматически закрывалось, сейчас ситуация такая что при клике на меню, ссылка открывается но она остается под слоем меню и пока сам не закроешь бургер, ничего не увидишь. Сама кнопка открыть/закрыть это чекбокс, видимо какой то скрипт нужен что бы закрыть ее не нажимая именно на крестик а на ссылку меню. Help!

j0hnik · #2 (**permalink**) 07.03.2018, 22:55

[].forEach.call(document.querySelectorAll('a'), function (el){
		el.addEventListener('click', function(){
			document.querySelector('input[type="checkbox"]').checked = false;
		});
	});

только свои селекторы укажите

TSGH · #3 (**permalink**) 08.03.2018, 23:05

Сообщение от j0hnik

[].forEach.call(document.querySelectorAll('a'), function (el){
		el.addEventListener('click', function(){
			document.querySelector('input[type="checkbox"]').checked = false;
		});
	});

только свои селекторы укажите

Большое спасибо! Только не совсем понял где селекторы указывать? и к этому коду больше ничего не нужно добавлять кроме селекторов?

j0hnik · #4 (**permalink**) 08.03.2018, 23:35

к 'a' класс ссылок или что у вас там, к 'input[type="checkbox"]' тоже самое, id чекбокса желательно.

TSGH · #5 (**permalink**) 08.03.2018, 23:51

Сообщение от j0hnik

к '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>

j0hnik · #6 (**permalink**) 09.03.2018, 01:05

<!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>

скрипт в конец

TSGH · #7 (**permalink**) 09.03.2018, 09:21

Огромное спасибо!! Все работает!!

Форум

Справочник

Discord чат

Курсы javascript