Как сделать чтобы первый клик открывал саб меню а 2й переходил по ссылке?

Question

[Влад ~]

Всем привет!
есть такая структура менюшек

<ul class="menu">
                <li class="lvl-1 has-submenu">
                    <a href="category/">Категории</a>
                    <ul class="lvl-2">
                        <li class="has-submenu">
                            <a href="item2/">item2</a>
                            <ul class="lvl-3">
                                <li>
                                    <a href="#">item3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="lvl-1 has-submenu">
                    <a href="popular/">Популярные</a>
                    <ul class="lvl-2">
                        <li class="has-submenu">
                            <a href="item2/">item2</a>
                            <ul class="lvl-3">
                                <li>
                                    <a href="#">item3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="lvl-1">
                    <a href="#">Создайте свою картину</a>
                </li>
                <li class="lvl-1">
                    <a href="#">Помощь</a>
                </li>
                <li class="lvl-1">
                    <a href="#">Контакты</a>
                </li>
            </ul>

и такой js который открывает саб менюшки

const mMenuParent = document.querySelector('.menu');
    
    mMenuParent.addEventListener('click', ({target: t}) => {
        
        const par = t.parentElement;
        if (t && t.parentElement.classList.contains('has-submenu') || t.parentElement.classList.contains('lvl-2') && t.classList.contains('has-submenu')) {
            const par = t.parentElement;
            console.log('clicked filter');
            // console.log(par);
            par.classList.toggle('mobile_menu_show');
        } 
    });

сейчас все работает так
при клике на ссылку сразу идет переход на эту ссылку, а нужно сделать чтобы 1й клик открывал менюшки, а 2й клик по этой же ссылке уже делал переход

Comments

[Влад ~]

Bavashi, само открытие уже есть
нужно сделать проверку клика
если 1й просто открыть
если 2й, то переход по ссылке
недавно просто начал писать на нативном js и опыта мало
в jquery есть метод .one , а вот в нативном такого нету насколько я понял

[Alex]

Такая себе у вас идея.
Лучше посмотрите на это и прочие решения по запросу "accessibility multilevel menu"

[Влад ~]

Alex, не уточнил что это моб меню

[Влад ~]

Bavashi, уже решил задачу +- тем же способом как лейзи лод делают

const ss = document.querySelectorAll('.menu .has-submenu > a');

          ss.forEach(item => {
              console.log(item);
              const dataHref = item.getAttribute('href');
              let count = 0;
            //   console.log(dataHref);
              item.setAttribute('data-href', dataHref);
              item.setAttribute('href', '#');
              item.addEventListener('click', (e) => {
                  count++
                  console.log(count);
                if (count > 1){
                    item.setAttribute('href', dataHref);
                } 
              })
          })

насчет открытия вот же оно

if (t && t.parentElement.classList.contains('has-submenu') || t.parentElement.classList.contains('lvl-2') && t.classList.contains('has-submenu')) {
            const par = t.parentElement;
            console.log('clicked filter');
            // console.log(par);
            par.classList.toggle('mobile_menu_show');
        }

[Alex]

Влад ~, Это не имеет значения

[Влад ~]

Alex, как это не имеет ?
Даже в вашем примере если мы переходим в моб меню и к примеру нажимаем на level 2 то у нас открываться саб меню и происходит сразу же переход по ссылке

Answer 1

[kuzubina]

Как вариант закрыть сслыку каким нить дивом прозрачным через абсолютное позиционирование или псевдоэлементом (before или after) и после первого клика (когда открылась подменюшка) убирать этот див чтобы была доступна ссылка для клика
Или Родителю изначально дать какой нить класс и от этого класса определить ссылке css стиль со значением pointer-events: none; и после первого клика через js убирать этот класс у родителя и будет доступна ссылка для клика