Question

可能重复：
jQuery and pseudo-classes

我尝试通过jQuery以多种方式隐藏了：after伪类，但没有成功，我发现另一个解决方案是在我的div下面添加一个空div，其中包含：after content然后隐藏div完全如此，它会产生同样的效果。

然而，我只是好奇，如果有人设法找到一种方法隐藏：之后或：之前的东西。以下是我尝试过的不起作用。

$('.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交换这些类。

编辑：混淆名称

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

3 个答案: