Адаптация горизонтального меню под сэнсорные экраны (проблема с кликами)

Здравствуйте.
Есть сайт troicaslonim.by с горизонтальным меню, которое посредством манипулятора (мышь) работает хорошо: при наведении на любую рубрику - раскрывается список дочерних пунктов (подрубрик), при левом клике - происходит преход в выбранную рубрику (подрубрику).
Но на смартфонах при навигации с сэнсорного экрана, чтобы открылись подрубрики нужной рубрики, нужно коснуться ее. При этом список подрубрик открывается, но сразу же происходит перенаправление пользователя в саму рубрику.
Как сделать, чтобы при навигации с сэнсорного экрана при первом касании по рубрике открывался список входящих в нее подрубрик, а только при втором касании происходил переход в выбранную (с уже открытым списком) саму рубрику либо ее подрубрику (взависимости от выбора пользователя)?

С искренней благодарностью ко всем, кто попробует помочь!

 

А если все-таки сдлать, чтобы первый уровень был тоже кликабельным (например, первык клик - выпадает меню второго уровня, второй - переход на выбранный пункт меню, даже если это родительский (првого уровня) пункт), то каким должен быть скрипт?

 

а если так:
jQuery(function($){

$('.menu:first .owl-item > li.expanded, .menu:first > li.expanded').each(function () {
$(this).on('touchstart', '> a', function () {
if ($(this).hasClass('touchstart')) {
$(this).addClass('touchstart-2');
} else {
$('.menu:first .owl-item > li.expanded a, .menu:first > li.expanded a').removeClass('touchstart');
$(this).addClass('touchstart');
}
});
$(this).on('click', '> a', function () {
if ($(this).hasClass('touchstart')) {
if (!$(this).hasClass('touchstart-2')) {
return false;
} else {
$(this).removeClass('touchstart').removeClass('touchstart-2');
}
}
});
});

$('#header').append( "<div class='header_sandvich'></div>" );



$('.header_sandvich').on('click', function(){
$('#main-menu').slideToggle();
});

});