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

我找不到任何选项，基金会只在第二次点击时打开。

要做到这一点，只有当不触摸设备

时，您才需要编写一个小代码来初始化下拉菜单。

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的解决方案，因为下拉列表已通过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;
    }
}

这看起来有点粗糙，但最后它很干净。

仅在悬停时触发基础下拉列表

2 个答案: