jQuery和隐藏:在/之前的伪类

Question

可能重复:
jQuery和伪类

我尝试通过jQuery以多种方式隐藏了:after伪类,但是没有成功,我发现了另一个解决方案,在我的div下面添加了一个空div,其中包含:after内容然后完全隐藏div所以它给出了同样的效果.

然而,我只是好奇,如果有人设法找到一种方法来隐藏:之后或:之前的东西.这是我尝试过的不起作用.

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

只是为了给你上下文,我有一个div包含搜索表单等,当搜索处于活动状态时,我想在div下启用一个小箭头指示器,指向找到的项目列表(构建方式:after via 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";        
}?