Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2021, 20:09
Интересующийся
Отправить личное сообщение для 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)  
Старый 05.06.2022, 00:19
Аватар для Denniss101
Новичок на форуме
Отправить личное сообщение для Denniss101 Посмотреть профиль Найти все сообщения от Denniss101
 
Регистрация: 04.06.2022
Сообщений: 1

Почитайте события в Javascript это очень просто. Поймете, что даже циклов вам не надо. Вот эта штука querySelectorAll тяжелая.
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2022, 09:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

меню открытие пунктов
miha2020,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item>.arrow+ul {
            display: none;
        }

        .item.active>.arrow+ul {
            display: block;
        }

        .cross:after {
            content: "X";
            text-align: right;
            display: block;
            width: 100px;
        }
    </style>
</head>

<body>
    <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>
    <script>
        let dropdown = document.querySelectorAll('.menu-left>li.item');
        let menu = document.querySelector('.menu-left');
        let mediaQuery = window.matchMedia('(min-width: 768px)');
        console.log(mediaQuery);
        ['mouseover', 'click'].forEach(e => {
            menu.addEventListener(e, function(e) {
                let arrow = e.target.matches('.item > .arrow');
                let close = e.target.matches('.item .cross');
                let li = e.target.closest('li.item');
                if (arrow && (mediaQuery.matches || e.type == 'click')) {
                    event.preventDefault();
                    dropdown.forEach(e => e == li ? e.classList.add('active') : e.classList.remove('active'))
                }
                if (close && e.type == 'click') li.classList.remove('active');
            });
        });
    </script>
</body>

</html>

Последний раз редактировалось рони, 05.06.2022 в 12:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать вертикальное меню с анимацией? 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
Как сделать чтобы ссылки открывались в родительском окне infom@n Общие вопросы Javascript 2 02.10.2011 00:05
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12