トリガーファンデーションのドロップダウンは、ホバリングの場合のみ

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を使用し、マウス上にあるときにのみメニューを初期化しますか？それはちょっと気味悪いね。

もう1つ、より良い方法がありますか？

Answer 1

それを行うオプションが見つかりませんでした。財団は2回目のタップ時にのみ開くようにしました。

これを行うには、タッチデバイスである場合にのみ、ドロップダウンメニューを初期化するための小さなコードを記述する必要があります。

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

私はついにドロップダウンがdata-プラグインで初期化されたので、CSSのみのソリューションに行きました。また、サブメニューが必要ない場合は、htmlを処理する必要があります。

だから私はちょうど作られた2つのメニューが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; 
    } 
} 

を経由して、それらを切り替えこれは少しラフに見えるかもしれませんが、最終的にそれは非常にきれいです。