Arhn - архитектура программирования

Подделка CSS: only-child в IE8 с помощью jQuery/JavaScript

У меня есть меню с селектором :only-child, так что я могу указать подменю. Селектор :after работает в IE8 (единственная старая версия IE, которую я должен поддерживать), но селектор :only-child не работает, поэтому я получаю стрелку для каждого пункта меню, а не только для тех, у которых есть подменю.

.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }

Я хочу добиться этого с помощью jQuery или JavaScript. Я не хочу использовать Modernizr или Selectivizr и все такое, только один код в качестве альтернативы only-child.

Я был бы очень признателен, если бы вы могли мне помочь. Я новичок в jQuery и JavaScript, поэтому, пожалуйста, подробно объясните. Спасибо!

javascript jquery css css-selectors internet-explorer-8
06.10.2013

Ответы:


1

jQuery реализует большинство селекторов CSS для вы, в том числе :only-child, что упрощает использование новых селекторов для целевых элементов в старых браузерах. На самом деле Selectivizr зависит от другой библиотеки JavaScript, такой как jQuery, для реализации селекторов непосредственно в CSS.

Если вы можете использовать jQuery, вы можете просто позволить jQuery обрабатывать селектор :only-child, назначая единственному дочернему классу класс, на который затем можно ориентироваться с помощью правила CSS. В отличие от Selectivizr, jQuery позволяет использовать селекторы только в скрипте, а не непосредственно в таблице стилей1, поэтому вместо этого вам придется использовать имя класса.

CSS:

.menu li > a:after { content: ' ▾'; }
.menu li > a.only-child:after { content: ''; } /* Notice the class selector */

JS:

$('.menu li > a:only-child').addClass('only-child');

1 Существует известная проблема с Selectivizr, которая не позволяет вам комбинировать псевдоклассы и псевдоэлементы в селекторе, поэтому вы все равно не сможете использовать Selectivizr в этом случае.< /под>

06.10.2013
  • +1 за «jQuery реализует для вас большинство селекторов css» 06.10.2013
  • Большое спасибо за ответ - однако я не могу заставить его работать в режиме эмуляции IE8 (к сожалению, у меня нет виртуальной машины для тестирования), но я знаю, что эмуляция не всегда точна. 06.10.2013
  • @Simen Mangseth: работает ли он в других браузерах, включая IE9/10/11 в режиме рендеринга по умолчанию? 06.10.2013
  • @BoltClock Я не применял его больше, чем к IE8, помещая скрипт и css в условный комментарий IE8 (<!--[if lt IE 9]><![endif]-->). Разве это не лучший способ? Я не хочу добавлять дополнительный JavaScript в поддерживаемые современные браузеры. 06.10.2013
  • @Simen Mangseth: Да, но в этом случае вы всегда можете временно включить его для других браузеров, просто чтобы проверить, работает ли он. Если это не так, то что-то еще может быть не так. 06.10.2013
  • Нет, это не работает. Теперь ко всем пунктам меню применена стрелка, как в режиме эмуляции IE8. Хотя, возможно, я неправильно это реализовал. Еще раз спасибо за помощь. 06.10.2013
  • @BoltClock Возможно, вам нужна ссылка на настоящий сайт — он находится по адресу ddcountry.dansas.no. Если вы все еще хотите помочь мне, это было бы здорово. 07.10.2013
  • @BoltClock Я пробовал код сейчас в разных местах - и я думаю, что причина того, почему он не работает, заключается в том, что он не добавляет класс - поэтому css не будет работать. Извините за занозу в заднице, но я думал, что вы (или кто-то другой) мне поможете. 08.10.2013
  • Ты не причинял боль. Мне жаль, что я не могу больше помочь. 08.10.2013
  • Ладно, ты мне не поможешь, но я не знаю, как заставить кого-то еще. Кажется, что здесь люди отвечают только на вопросы, оставшиеся без ответа, хотя решение не сработало. 26.10.2013

    • 2

    Для других, интересующихся этим и имеющих ту же проблему, что код @BoltClock не работает, скорее всего, это сработает, если вы измените $ на jQuery, например так:

    jQuery("SELECTOR").exampleMethod("EXAMPLESTRING");
    24.12.2014
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..