Скрытие определенных элементов опции из списка выбора iOS с помощью CSS или скрипта

Question

Скрытие определенных элементов опции из списка выбора iOS с помощью CSS или скрипта

1

У меня есть веб-приложение, в котором список выбора динамически создается через javascript. Выбор выбирается из существующего списка меню в DOM.

Я только что обнаружил, что iOS игнорирует CSS, ориентированный на избранные списки. Например, у меня есть медиа-запрос в max-width: 768, который предназначен для скрыть определенный элемент в списке выбора из представления, когда размер экрана составляет 768 пикселей и ниже.

Хотя это работает как ожидается, используя инструменты эмуляции устройства (т.е. Quirktools/screenfly), правило display: none полностью игнорируется, когда список выбора отображается на реальном устройстве iOS.

Есть ли предлагаемое решение?

Scott B 15 июль 2015, в 14:37

Источник

0

Вы можете сделать несколько элементов select и переключать видимость всего этого в медиа-запросе.
user1017882 15 июль 2015, в 12:35
0

Можно ли обернуть условные выражения jQuery в эквивалент медиазапросов? то есть, если (screen.max-width <= 768px) {создать пункт меню; }
Scott B 15 июль 2015, в 12:37
0

Они могут, вы можете оценить $(window).width() или что-то подобное, но чтобы сделать эту оценку, у вас возникнут проблемы с производительностью, так как она должна быть связана с событием изменения размера окна. Конечно, вы можете ограничить это, но я бы лично предпочел нанести удар по дублирующейся разметке и убрать любую необходимость использовать обработчики событий. Это зависит от контекста вашей проблемы, хотя. Я не знал, что это было с selects, кстати, хороший улов, +1.
user1017882 15 июль 2015, в 12:41

Показать ещё 1 комментарий

Теги:

jquery

css

ios

navigation

responsive-design

1 ответ

Ещё вопросы

Вы можете сделать несколько элементов select и переключать видимость всего этого в медиа-запросе.
Можно ли обернуть условные выражения jQuery в эквивалент медиазапросов? то есть, если (screen.max-width <= 768px) {создать пункт меню; }
Они могут, вы можете оценить $(window).width() или что-то подобное, но чтобы сделать эту оценку, у вас возникнут проблемы с производительностью, так как она должна быть связана с событием изменения размера окна. Конечно, вы можете ограничить это, но я бы лично предпочел нанести удар по дублирующейся разметке и убрать любую необходимость использовать обработчики событий. Это зависит от контекста вашей проблемы, хотя. Я не знал, что это было с selects, кстати, хороший улов, +1.

Scott B · Answer 1 · 2015-07-15T10-24-00.000Z

Решение, которое я решил сделать здесь, - это ввести условие в jQuery, чтобы оно не было записано в список опций.

Поскольку выбор показывается только на устройствах с разрешением 768px, нет необходимости включать медиа-запрос или window.width.

В результате элемент меню никогда не записывается в список выбора, а iOS выбирает переопределения CSS, которые не представляют проблемы.

$("nav.main li a").each(function () {

    var el = $(this);
    var elt = el.text();

    // Removing the extra » symbol
    elt = elt.replace("»", "");
    if (elt != 'Hide This Menu Item') {
        //Continue building select option list
    }
}