jQueryと隠れ：/後：疑似前のクラス

Question

可能性の重複：擬似クラスの後にjQueryを介して、いくつかの方法でなく、成功しません：
jQuery and pseudo-classes

は私が隠れてみました私は空のdivの種類を追加して別の解決策を見つけました。私のdivの中には：コンテンツの後にdivを完全に隠して同じ効果を与えるものが含まれています。

しかし、誰かが：afterまたは：before stuffを隠す方法を見つけた場合、私はちょうど興味がありました。ここで私が試したことはうまくいかなかった。

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

あなたにコンテキストを与えるために、私は、検索フォームなどが含まれているdiv要素を持っている、と検索がアクティブであるとき、私は見つかった項目のリストに同様のdivポインティング下の小さな矢印インジケータを有効にします何かが見つからなかった場合は、CSSを使用して作成されています。何も見つからなかった場合は、それを隠すことができます。

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

Answer 2

<style>ブロックを動的に追加して無効にすることができます。 idとし、必要に応じて削除することができます。

デモ：http://jsfiddle.net/ThinkingStiff/TRLY2/

スクリプト：

$('#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";   
}​ 

Answer 3

ThinkingStiffはかなり良いアイデアを持っています。

また、検索ボックスのクラスを追加して削除することもできます。その場合は、afterタグのみを使用します。

.hide:after { display:none }と.show:after { /* normal css */ }のようなものです。その後、これらのクラスをjavascriptでスワップします。

編集：名前を混ぜる