Javascript-форум (https://javascript.ru/forum/)
-   Мобильный JavaScript (https://javascript.ru/forum/mobile/)
-   -   Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции? (https://javascript.ru/forum/mobile/82056-kak-sdelat-chtoby-menyu-v-zavisimosti-ot-razresheniya-ehkrana-vypolnyalo-svoi-funkcii.html)

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

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

Выше 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>

Denniss101 05.06.2022 00:19
Почитайте события в Javascript это очень просто. Поймете, что даже циклов вам не надо. Вот эта штука querySelectorAll тяжелая.

рони 05.06.2022 09:02
меню открытие пунктов
 
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>


Часовой пояс GMT +3, время: 05:24.