Как создать мобильное меню с дабл тапом или аналогичной логикой?

Question

[Nikita Shchypylov]

Всем привет
Не могу придумать, как сделать данное меню
И так, обычная мобильная навигация, начинается при <1024
Структура:

<ul class="list">
	<li>
		<a href="#" class="js-open-sub-menu"></a>
		<ul class="sub-list">
			<li>
				<a class="js-one-more-sub" href="#"></a>
				<ul class="subbest-list-ever">
					<li>
						<a href=""></a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Максимальный уровень вложенности - 2 уровня.
Все бы хорошо, но у меня есть разводящие страницы. То есть, не можем дать e.preventDefault() для .js-one-more-sub и .js-open-sub-menu. При первом тапе(клике) должен открываться саб-лист, при втором - переходить на страницу
Спасибо

Answer 1

[Евгений]

При первом клике ставить превент дефолт, записываем некий статус состояния ссылки, открываем подменю
При втором клике проверяем, что у нас есть некий переходной статус, ожидающий второго клика и перебрасываем через window.location.href по атрибуту href

Comments

[Nikita Shchypylov]

Отличная идея.

Answer 2

[Николай]

Есть библиотека https://github.com/dachcom-digital/jquery-doubletaptogo

Comments

[Nikita Shchypylov]

Юзал. Она не сработает на десктопе

[Николай]

Nikita Shchipilov: есть готовый вариант еще www.designchemical.com/lab/jquery-vertical-mega-me... Там можно сделать первый клик (раскрывающим), второй переход по ссылке. Если нужно готовое решение разумеется.

[Nikita Shchypylov]

Николай: Спасибо, уже решил проблему