Магия hover на тачскринах

Существует достаточно распространенная практика реализации многоуровнего меню с помощью hover-эффекта, когда подразделы показываются только при наведении мыши на раздел верхнего уровня.

Данный вариант реализации уже давным давно заслужил свое право на существование и используется в миллионах сайтов, но что делать на устройствах, лишенных такого блага цивилизации, как компьютерная мышь? А в последние несколько лет, достаточно высокую популярность набирают планшеты, ничем не уступающие по размерам экрана стандартным мониторам и правила, прописанные для адаптивности сайта на основании ширины экрана, в данном случае нам не помощник.

На touch-экранах нет понятия hover-эффекта, поэтому его нужно "придумать".

В стилях CSS оставляем, как и были стили для hover, а вот клик по верхним пунктам меню, нужно заменить на tap.

Для этого, ссылкам, подлежащим hover-обработке, добавляем data-атрибут (data-hover) с классом, который должен быть добавлен к элементу при наведении курсора на элемент (или первом клике при отсутствии курсора). И пишем скрипт:

$(document).on('click','[data-hover]',function(e){
	e.preventDefault();
	var $this = $(this);
	var onHover = $this.attr('data-hover');
	var linkHref = $this.attr('href');
	if (linkHref && $this.hasClass(onHover)) {
		location.href = linkHref;
		return false;
	}
	$this.toggleClass(onHover);
});
$(document).on('mouseenter mouseleave','li.menu__item',function () {
    var hoverLink = $(this).find('[data-hover]')
    if(hoverLink!==undefined && hoverLink.length>0){
        var onHover = hoverLink.attr('data-hover');
        hoverLink.toggleClass(onHover);
    }
});

Таким образом, на обычном экране, при наличии курсора мыши все будет работать, как и работало (в том числе и клик по верхнему элементу), а при отсутствии курсора, первый клик по верхнему разделу выполнит роль hover, но без перехода по ссылке, а вот второй клик уже произведет переход по выбранной ссылке.