jQuery和隐藏：after / :before伪类[重复]

Question

可能重复：
jQuery and pseudo-classes

我尝试通过 jQuery 以多种方式隐藏 :after 伪类，但没有成功，我通过在包含 :after 内容的 div 下添加一种空 div 然后隐藏 div 找到了另一种解决方案完全一样，所以效果是一样的。

但是我只是好奇是否有人设法找到隐藏 :after 或 :before 的方法。这是我尝试过的方法，但没有成功。

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

只是为了给你上下文，我有一个包含搜索表单等的 div，当搜索处于活动状态时，我想在 div 下启用一个小箭头指示器，指向找到的项目列表（使用 :在通过 CSS 之后）并且当什么都没有找到时，或者它默认为完整的列表（因为什么都没有找到）然后我想隐藏它。

Answer 1

您可以动态添加<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 2

ThinkingStiff 有个不错的主意。

您还可以为您的搜索框添加和删除一个类，并且只使用 after 标记。

类似于.hide:after { display:none } 和.show:after { /* normal css */ }。然后用 javascript 交换这些类。

编辑：混淆名称

Answer 3

你不能这样做。最好的办法是在元素上使用一个类来切换伪元素的显示。

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