Чистые выпадающие меню ‹div› на чистом css, делающие их кликабельными в сенсорных браузерах, iOS, iPad?

У меня есть несколько меню в устаревшем коде, структурированные следующим образом:

<div id="show-hide-facets-button">iOS/Touch Browser Popdown Test
    <div id="show-hide-facets-dropdown">
        <ul>
        <li class="show-hide-facets-row" id="item1">Item One</li>
        <li class="show-hide-facets-row" id="item2">Item Two</li>
        </ul>
    </div>
</div>

Всплывающее окно скрыто до наведения:

#show-hide-facets-button {
}
#show-hide-facets-dropdown {
    display: none;
}
#show-hide-facets-button:hover #show-hide-facets-dropdown {
    display: block;
}

jsfiddle находится по адресу http://jsfiddle.net/brycenesbitt/y3kb7/.

Обратите внимание, что здесь нет якорей или других кликабельных элементов. В этом случае, какой чистый способ ввести интерактивный элемент на верхнем уровне, чтобы пользователи браузера с мышью могли продолжать наводить курсор, но пользователи браузера с сенсорным экраном могли получить доступ к пунктам меню с помощью щелчка? Все элементы меню активируются с помощью jquery, и сенсорные браузеры там работают нормально.


touch jquery mobile-safari amazon-silk
person Bryce    schedule 29.12.2013    source источник
comment
Подобные, но менее четкие вопросы включают: for-desktop-and-on" title="как мне создать div, который опускает другой div при наведении для рабочего стола и на"> stackoverflow.com/questions/16984720/   -  person Bryce    schedule 29.12.2013
comment
Обратите внимание, что на момент написания этой статьи сайт jsfiddle плохо работал на iPad, а приведенный выше пример невозможно протестировать на jsfiddle. Извиняюсь.   -  person Bryce    schedule 31.12.2013

Ответы (2)


arrow_upward
5
arrow_downward

Да, может быть немного сложно заставить псевдокласс hover работать так, как нужно для раскрывающихся меню на сенсорном устройстве. Если плагин jQuery является вариантом, вы можете рассмотреть Superfish. В Руководстве разработчика Silk есть страница, на которой обсуждается решение Superfish для всплывающих меню. .

Удачи!

person Dave Huntsperger    schedule 18.02.2014

arrow_upward
0
arrow_downward

Я нашел самое чистое решение на сайте разработчиков Apple:

<div id="show-hide-facets-button" onclick = "void(0)">

Добавление ничего не делающего обработчика onclick. Мобильное сафари выдаст движение мыши и щелкнет по этому элементу при касании. См. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

person Bryce    schedule 30.12.2013