2012-07-06 18 views
15

Powiel możliwe:
jQuery and pseudo-classesjQuery i ukrywanie: po /: Przed pseudo klas

Próbowałem ukrywanie: po klasie pseudo poprzez jQuery w wielu sposobów, ale bez powodzenia , Znalazłem inne rozwiązanie, dodając rodzaj pustego div pod moim div, który zawiera: treść po, a następnie ukrywając div całkowicie, co daje ten sam efekt.

Byłem jednak ciekawy, czy ktoś zdołał znaleźć sposób na ukrycie: po lub: przed rzeczami. Oto, co próbowałem, który nie działa.

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

Wystarczy dać kontekst, Mam div, który zawiera formularz wyszukiwarki etc, a gdy wyszukiwania jest aktywny Chcę włączyć mały wskaźnik strzałki pod div wskazując podobnego do listy znalezionych przedmiotów (zbudowany z: po przez CSS) i gdy nic nie zostanie znalezione, lub domyślnie do pełnej listy (ponieważ nic nie zostało znalezione), wtedy chcę to ukryć.

+2

Zobacz tutaj: http://stackoverflow.com/questions/8968992/jquery-and-pseudo-classes – dcpomero

+0

W końcu po prostu stosować prawo div pod moim pole wyszukiwania, o wysokości 0 i tej samej szerokości co pole wyszukiwania, ma styl końcowy i chowam/ukrywam go zamiast pola wyszukiwania, ale poniższe rozwiązanie TJ VanToll również działa dobrze. –

Odpowiedz

37

Nie możesz tego zrobić. Najlepiej jest użyć klasy na elemencie, aby przełączyć wyświetlanie pseudo elementu.

<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> 

żywo przykładem - http://jsfiddle.net/4nbnh/

+1

jest to najlepszy wybór, ponieważ w przypadku innych metod można zmienić zawartość i kolor, ale nie można zmienić widoczności. – Maverick

+0

Dzięki za odpowiedź, ten jest najlepszym rozwiązaniem, jakie znalazłem w Internecie ... –

6

Możesz dynamicznie dodawać blok <style>, aby go zastąpić. Daj mu id i możesz go usunąć w razie potrzeby.

Demo: http://jsfiddle.net/ThinkingStiff/TRLY2/

Scenariusz:

$('#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 ma całkiem dobry pomysł.

Można również dodać i usunąć klasę dla swojego pola wyszukiwania i używać tylko znacznika końcowego z tą.

Coś takiego jak .hide:after { display:none } i .show:after { /* normal css */ }. Następnie zamień te klasy z javascript.

edytuj: pomieszane nazwy

Powiązane problemy