jQuery тачпад на верхнем уровне связанного элемента меню

Question

У меня есть заголовок заголовка списка для сайта, ничего сумасшедшего. Но ссылка верхнего уровня также имеет состояние зависания, которое открывает подменю, и я не могу понять, как заставить его работать прямо на планшете.

Когда я просто использую сценарий наведения jQuery, навигационный элемент верхнего уровня нажимает, не открывая сначала подменю.

Когда я пытаюсь добавить код штрих-кода, открывается меню, но ни одна из ссылок не нажимает на планшет, верхний уровень или подменю. Я нажимаю на ссылку, и единственное, что происходит, - это закрытие меню.

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

вот мой HTML, с некоторыми посторонними вещами раздели ...

<div id="header-nav"> 
<ul> 
<li><a href="webpage1.html">Webpage 1</a></li> 
<li><a href="webpage2.html">Webpage 2</a> 
    <ul> 
     <li><a href="webpage2a.html">Webpage 2a</a></li> 
     <li><a href="webpage2b.html">Webpage 2b</a></li> 
     <li><a href="webpage2c.html">Webpage 2c</a></li> 
     <li><a href="webpage2d.html">Webpage 2d</a></li> 
    </ul> 
</li> 
</ul> 
</div> 

основной CSS ...

#header-nav ul { 
    display: inline-block; 
    margin: 0 auto; 
    padding: 0; 
    list-style: none; 
} 
#header-nav ul li ul { 
    display: none; 
    background: #fff; 
} 
#header-nav ul li.active ul { 
    display: block; 
    position: absolute; 
    z-index: 15; 
    top: 42px; 
    left: 0; 
} 

и JS, с touchstart сценариев ...

$('#header-nav ul li').hover(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}, 
    function() { 
    $(this).removeClass('active'); 
}); 
$('#header-nav ul li').on('touchstart', function(e) { 
    'use strict'; 
    var listItem = $(this); 
    if (listItem.hasClass('active')) { 
     $(listItem).removeClass('active'); 
     return true; 
    } else { 
     listItem.addClass('active'); 
     $('#header-nav ul li').not(this).removeClass('active'); 
     e.preventDefault(); 
     return false; 
    } 
}); 
$('body').on('touchstart', function(e) { 
    'use strict'; 
    //var listItem = $(this); 
    if ($('#header-nav ul li').hasClass('active')) { 
     $('#header-nav ul li').removeClass('active'); 
     return true; 
    } 
}); 

Я пробовал это как с функциями сенсорного старта, так и с одним или другим, и ни с одним, ни с едой st hover. Я либо нажимаю на первый прикосновение элемента меню верхнего уровня, либо не клики на всех, кроме открытия меню.

попеременно, у меня есть это как моя функция парения, которая создает задержку на отведении указателя мыши, но does't, кажется, важно, какой вариант я использую ...

var hoverTimeout; 
$('#header-nav ul li').hover(function() { 
    clearTimeout(hoverTimeout); 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}, 
    function() { 
    var $self = $(this); 
    hoverTimeout = setTimeout(function() { 
     $self.removeClass('active'); 
    }, 500); 
}); 

любые и все помощь высоко ценится! Я в тупике, наверное, недопонимание какой-то простой вещи.

Answer 1

Проверьте это http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly Просто игнорируйте чувствительную часть, плагин, который он предоставляет, выглядит так, как будто он решает вашу проблему.