Запускать раскрывающийся список фундамента только при наведении

У меня есть раскрывающийся список Foundation 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 и инициализация меню только тогда, когда оно наведено на мышь? Это звучит немного странно.

Есть ли другая, лучшая практика?


javascript jquery zurb-foundation zurb-foundation-6
person Urs    schedule 25.05.2016    source источник
comment
Итак, что вы хотите, чтобы открыть ссылку /lorem/?L=0 после ее нажатия на мобильном устройстве?   -  person Shoaib Iqbal    schedule 25.05.2016
comment
да, точно - просто перейдите по ссылке   -  person Urs    schedule 25.05.2016

Ответы (2)


arrow_upward
2
arrow_downward

Я не смог найти ни одной опции, которая это делает, Foundation открывается только при втором нажатии.

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

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

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

person Shoaib Iqbal    schedule 26.05.2016
comment
Хороший! Спасибо! Я дам отзыв, как только я попробовал это - person Urs; 26.05.2016
comment
Еще раз спасибо, но в конце концов я выбрал другое решение, поэтому мне не пришлось заниматься инициализацией. Также есть данные whatinput, которые можно использовать для обнаружения касаний, которые встроены в основу github.com/ten1seven/what. -вход - person Urs; 26.06.2016

arrow_upward
0
arrow_downward

В конце концов я выбрал решение только для 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;
    }
}

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

person Urs    schedule 26.06.2016