Триггерный фонд выпадающего списка только при зависании

Question

У меня есть раскрывающийся список для основания 6, где было бы разумно вызвать его только тогда, когда он «завис».

<ul class="dropdown menu" data-dropdown-menu="nekvg6-dropdown-menu" role="menubar"> 
    <li class="nav-lorem is-dropdown-submenu-parent is-down-arrow" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="Pilates" data-is-click="false"> 
     <a href="/lorem/?L=0" target="_top" class="active" tabindex="0">Lorem</a> 
     <ul class="menu text-left submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu"> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/kursdaten/?L=0" target="_top">Kursdaten</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/ausbildung/?L=0" target="_top">Ausbildung</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/module/?L=0" target="_top">Module</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/methode/?L=0" target="_top">Methode</a></li> 
     <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="/lorem/factsheets/?L=0" target="_top">Factsheets</a></li> 
     </ul> 
    </li> 
</ul> 

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

Как мне это сделать? Использование data-whatinput и инициализация меню только тогда, когда оно находится на мыши? Это звучит немного странно.

Есть ли другой, лучше практиковать?

Answer 1

Я не мог найти какой-либо вариант, который делает это, Foundation открывается, когда он постучал 2-й раз.

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

hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined'); 
if(!hasTouch){ 
    var elem = new Foundation.DropdownMenu($('.dropdown.menu')); 
} 

см. Рабочий пример. http://codepen.io/shoaibik/pen/yJBJbm

Answer 2

Я, наконец, пошел на решение css-only, поскольку выпадающее меню было инициализировано через плагин data-. Кроме того, если вы не хотите подменю, вам придется обрабатывать их html.

Так что я только что сделал два меню переключены их с помощью CSS

// Nav with dropdown as default, 
// Without dropdown when touch input is detected 
#offernav-touch { 
    display:none; 
} 

#offernav-default { 
    display:block; 
} 

[data-whatinput='touch'] { 
    #offernav-touch { 
     display:block; 
    } 
    #offernav-default { 
     display:none; 
    } 
} 

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