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.
изменить: смешать имена