javascript - 仅在悬停时触发基础下拉菜单

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 仅在第二次点击时打开。

为此，您必须编写一小段代码来初始化下拉菜单，前提是它不是触摸设备。

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

查看一个工作示例。 http://codepen.io/shoaibik/pen/yJBJbm