JQuery и скрытие: после /: перед псевдоклассами

Возможный дубликат:
jQuery и псевдоклассы

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

Однако мне было просто любопытно, сумел ли кто-нибудь найти способ скрыть: после или: перед материалом. Вот что я пробовал, чтобы это не сработало.

$('.search_box:after').hide();
$('.search_box:after').css('display', 'none');

Просто, чтобы дать вам контекст, у меня есть div, который содержит форму поиска и т.д., и когда поиск активен, я хочу включить индикатор маленькой стрелки под указателем div, похожим на список найденных элементов (построенный с помощью: после CSS), и когда ничего не найдено, или по умолчанию используется полный список (поскольку ничего не найдено), я хочу скрыть его.

Ответ 1

Вы не можете этого сделать. Лучше всего использовать класс в элементе для переключения отображения псевдоэлемента.

<style>
    .search_box:after {
        content: 'foo';
    }
    .search_box.hidden:after {
        display: none;
    }
</style>
<script>
    //Instead of these 2 lines
    //$('.search_box:after').hide();
    //$('.search_box:after').css('display', 'none');

    //Use
    $('.search_box').addClass('hidden');
</script>

Живой пример - http://jsfiddle.net/4nbnh/

Ответ 2

Вы можете динамически добавлять блок <style>, чтобы переопределить его. Дайте ему id, и вы можете удалить его, когда это необходимо.

Демо: http://jsfiddle.net/ThinkingStiff/TRLY2/

Script:

$( '#hello' ).click( function () {

    if( $( '#pseudo' ).length ) {
        $( '#pseudo' ).remove();
    } else {
        var css = '<style id="pseudo">#hello::after{display: none !important;}</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', css );
    };

} );

HTML:

<div id="hello">hello</div>

CSS

#hello::after {
    content: "goodbye";        
}

Ответ 3

ThinkingStiff имеет неплохую идею.

Вы также можете добавить и удалить класс для своего окна поиска и использовать только тег after.

Что-то вроде .hide:after { display:none } и .show:after { /* normal css */ }. Затем просто замените эти классы на javascript.

изменить: смешать имена