Safari Mobile: переключение содержимого на ощупь

Question

Я адаптирую сайт для того, чтобы он выглядел нативно на iPad.

Этот веб-сайт имеет навигацию, которая показывает раскрывающийся список с суб-навигацией при наведении курсора. Это работает как шарм на iPad. Когда вы касаетесь этого субнава, он открывается и закрывается снова, когда вы нажимаете / касаетесь где-то еще.

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

Я думал, я мог бы просто установить pointer-events:none при наведении и активном для iPad, но это заставляет суб-навигацию мерцать, и она не работает ...

Я также пытался покрыть точку навигации с помощью элемента, установленного с помощью селектора before, и установил для событий указателя значение none, но это не работает ...

Любая идея, как я могу решить эту проблему, используя только CSS . (Я не могу изменить ни HTML, ни JS)

PS: вы можете воспроизвести это на www.macprime.ch , например ... (щелкните главную навигационную панель вверху и попробуйте снова закрыть раскрывающийся список)

edit хорошо, я попробовал почти все, что было возможно только с помощью CSS. Я не думаю, что это возможно. Если кто-нибудь может сказать мне, почему, он / она получит награду за вознаграждение.

Answer 1

У вас может быть второй прозрачный элемент, который появляется над тем, который вы нажали.Таким образом, когда пользователь снова нажмет, он выберет другой элемент, и первый из них потеряет свое состояние при наведении:

<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>

<style>
    .blocker, .menuItem {
        /* use the same position, width, height, etc */
    }
    .menuItem {
        /* make it look pretty */
        z-index: 100;
    }
    .blocker {
        z-index: 99;
    }
    .menuItem:hover {
        z-index: 98;
    }
</style>

Конечно, это отрицательно скажется на рабочем столе, поэтому вы будетехотите сделать что-то вроде:

<style>
    .blocker { display: none; }
    .touchevents .blocker { display: block; }
</style>
<script>
    if('ontouchstart' in document)
        document.body.className += ' touchevents';
</script>

ОБНОВЛЕНИЕ Добавлены события onclick, чтобы сделать их кликабельными.

Вы можете увидеть рабочую демонстрацию здесь: http://fiddle.jshell.net/vfkqS/6/

К сожалению, я не смог найти решение, которое не требовало бы изменений HTML или JavaScript, но я смог свести их к минимуму.

Вам нужно всего сделать два изменения не-CSS:

1. Добавить механизм JavaScript для определения, поддерживаются ли сенсорные события.См. Пример с двумя строками выше.
2. Добавьте один div в меню, которое можно активировать (onclick="void()") и которое имеет уникальный идентификатор, который может связать его с меню.

You может быть в состоянии сделать эти две вещи с помощью CSS, но я не уверен.Обнаружение планшета было бы немного схематичным в CSS, и я не думаю, что вы можете сделать что-то более сложное с псевдоселектором: before или: after.

Answer 2

Это интересный вопрос, похожий на тот, который я недавно задавал.Как выйти замуж за стандартный раскрывающийся список навигации, который отображается при наведении курсора на сенсорный интерфейс.Использование события hover в качестве триггера действительно хорошо работает на рабочем столе.В мире, где нет событий зависания (планшетов и смартфонов), не так много.

В моем случае я натолкнулся на идею определения поведения: событие нажатия / прикосновения будет вызывать срабатывание, событие зависания будет неуловимымпоказания к применению.Для получения более подробной информации по этому вопросу см .: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Для проблемы, которую вы пытаетесь преодолеть, мне интересно, является ли использование @media запросов в вашем CSS лучшим решением ...

@media (max-width: 979px) {

    /*
        New CSS declarations to show the sub navigation lists
        in a more compact way that fits nicely on the iPad.

        Something like...
    */

    section.nav-overlay {

        display: block;
        height: 60px;
        visibility: visible;
        width: 979px; /* Or the max container width */

    }

        section.nav-overlay ul li {

            float: left;

        }

        /*

            Etc. etc. with the additional exceptions.
            You get the idea.

        */

}

Делая это, вы создадите больше собственного интерфейса на iPad.Однако, если идти по этому маршруту не по плану, то лучше, чем то, что есть у Брайана.Просто хотел дать вам альтернативу.

Answer 3

Установить pointer-events: none в активное состояние:

nav#mainnavi > ul > li > a:active {
  pointer-events: none
}