Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2018, 20:03
Новичок на форуме
Отправить личное сообщение для TSGH Посмотреть профиль Найти все сообщения от TSGH
 
Регистрация: 07.03.2018
Сообщений: 4

Снятие чекбокса при клике на пункт меню
Всем добрый вечер! Прошу помочь, есть сайт с ajax переключением страниц, на моб версии стоит бургер-меню (которое открывается на весь экран поверх всего), необходимо что бы в открытом меню при клике на любую ссылку оно автоматически закрывалось, сейчас ситуация такая что при клике на меню, ссылка открывается но она остается под слоем меню и пока сам не закроешь бургер, ничего не увидишь. Сама кнопка открыть/закрыть это чекбокс, видимо какой то скрипт нужен что бы закрыть ее не нажимая именно на крестик а на ссылку меню. Help!
Ответить с цитированием
  #2 (permalink)  
Старый 07.03.2018, 21:55
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,348

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


только свои селекторы укажите
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2018, 22:05
Новичок на форуме
Отправить личное сообщение для TSGH Посмотреть профиль Найти все сообщения от TSGH
 
Регистрация: 07.03.2018
Сообщений: 4

Сообщение от j0hnik Посмотреть сообщение
[].forEach.call(document.querySelectorAll('a'), function (el){
		el.addEventListener('click', function(){
			document.querySelector('input[type="checkbox"]').checked = false;
		});
	});


только свои селекторы укажите
Большое спасибо! Только не совсем понял где селекторы указывать? и к этому коду больше ничего не нужно добавлять кроме селекторов?
Ответить с цитированием
  #4 (permalink)  
Старый 08.03.2018, 22:35
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,348

к 'a' класс ссылок или что у вас там, к 'input[type="checkbox"]' тоже самое, id чекбокса желательно.
Ответить с цитированием
  #5 (permalink)  
Старый 08.03.2018, 22:51
Новичок на форуме
Отправить личное сообщение для TSGH Посмотреть профиль Найти все сообщения от TSGH
 
Регистрация: 07.03.2018
Сообщений: 4

Сообщение от 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>

Последний раз редактировалось TSGH, 08.03.2018 в 23:01.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2018, 00:05
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,348

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


скрипт в конец
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2018, 08:21
Новичок на форуме
Отправить личное сообщение для TSGH Посмотреть профиль Найти все сообщения от TSGH
 
Регистрация: 07.03.2018
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 02:03
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 08:18
js для плавного увеличения пункта меню при наведении Серега187 Элементы интерфейса 2 19.10.2013 10:33
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 14:56