Javascript.RU

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

Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции?
Прошу помощи специалистов, так как новичок в данном деле.

Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции?

Выше 768px:

1) Здесь интересует наведение мыши и клик. При наведении мыши или по клику на li.item открывалось его под меню.
2) При клике по li.item идет переход по ссылке, его необходимо отключить, переход по ссылке li должен быть только по подменю ul.subs li.
3) Под меню должно закрываться только при условии, если идет переход мыши или клик на следующее li.item или клик на закрытие окна на cross.
4) Если просто убрать мышь с поля меню, оно закрывается, а должно быть открыто, до тех пор, пока не выполнится условие в пункте 3.


Ниже 768px:

5) Здесь открытие меню должно быть только по клику, а закрытие по клику на крестик cross.
6) При клике по li.item идет переход по ссылке, его необходимо отключить, переход по ссылке li должен быть только по подменю ul.subs li.

PS:
1) По разрешению экрана интересует только метод matchMedia, не resize.
2) Только JavaScript.
3) Сейчас идет конфликт по закрытию меню на cross, потому как функция по click дублируется.
4) Не срабатывает сразу метод matchMedia, только после обновления экрана.
5) Не выполняется пункт 4, так как не знаю куда сувать)) e.preventDefault(), все уже перетыкал))).
6) Пункт 2 и 6 так же не выполняется, идет сразу переход по ссылке.
7) Если данный код еще можно уменьшить, это вообще супер! Так как переменную li приходится дублировать.
Код:
var dropdown = document.querySelectorAll('.menu-left>li');
var mediaQuery = window.matchMedia('(min-width: 768px)');
		
	for(var i=0; i < dropdown.length; i++){
		
		function handleTabletChange(e) {
            if (e.matches) {
                ['mouseover', 'click'].forEach(e => {
                    dropdown[i].addEventListener(e, function(e) {
                    var li = e.target.closest('li.item');
                    li.classList.add('active');
                    });
                });
                    dropdown[i].addEventListener('mouseout', function(e) {
                    var li = e.target.closest('li.item');
                    li.classList.remove('active');
                    });
		    }  else {
	                dropdown[i].addEventListener('click', function(e) {
	                var li = e.target.closest('li.item');
                    li.classList.add('active');
                    });
		            }
		}
		
        mediaQuery.addListener(handleTabletChange);
        handleTabletChange(mediaQuery);
			
    }
 
var cross = document.querySelectorAll('.cross');
	for(var i=0; i < cross.length; i++){
	    cross[i].addEventListener('click', function(e) {
	        var li = e.target.closest('li.item');
            li.classList.remove('active');
        });
	}
		
		
		
<ul class="menu-left">
    <li class="item"><a class="arrow" href="/test/test/">Пример</a>
        <ul class="subs">
            <span class="cross"></span>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
        </ul>
    </li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a>
        <ul class="subs">
            <span class="cross"></span>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
            <li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
        </ul>
    </li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
    <li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2021, 20:29
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Сразу одна большая ошибка.
Нельзя использовать var i в цикле, если нужно использовать замыкание по i в функциях. Только let i
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2021, 20:45
Интересующийся
Отправить личное сообщение для miha2020 Посмотреть профиль Найти все сообщения от miha2020
 
Регистрация: 04.03.2020
Сообщений: 10

Сообщение от voraa Посмотреть сообщение
Сразу одна большая ошибка.
Нельзя использовать var i в цикле, если нужно использовать замыкание по i в функциях. Только let i
GO ON! Please.
Ответить с цитированием
  #4 (permalink)  
Старый 07.03.2021, 08:56
Интересующийся
Отправить личное сообщение для miha2020 Посмотреть профиль Найти все сообщения от miha2020
 
Регистрация: 04.03.2020
Сообщений: 10

Обожаю бесплатные форумы! Стоит одному пиздюку написать свой короткий комментарий, как вопрос в целом для всех становится решен и не требует дальнейшего разбирательства. Спасибо Всем!)))
Ответить с цитированием
  #5 (permalink)  
Старый 07.03.2021, 09:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

miha2020,
вам попытались помочь, вы ответили неблагодарностью. здесь нет всех, есть пара бойцов, которая помогает всем.
Ответить с цитированием
  #6 (permalink)  
Старый 07.03.2021, 10:22
Интересующийся
Отправить личное сообщение для miha2020 Посмотреть профиль Найти все сообщения от miha2020
 
Регистрация: 04.03.2020
Сообщений: 10

Ничего личного! Как всегда за 10 баксов, Всех Ваших ВСЕХ
переконвертировал как обычно в бойцов тружеников на фрилансе. Я тут одно время задавал вопросы, все как обычно закончилось уходом. Просто не надо писать, ради того чтобы написать, чтобы другие думали, что вопрос решен.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? miha2020 Мобильный JavaScript 2 05.06.2022 09:02
Как сделать вертикальное меню с анимацией? Wimko jQuery 3 28.06.2020 19:31
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
как сделать так чтобы в popup окне принимался css стили,? sarik Общие вопросы Javascript 2 12.03.2013 10:24
Как сделать так чтобы в место value использовать url чтобы картинка менялось через зн sarik Общие вопросы Javascript 9 22.02.2013 13:24