jquery - jQuery 和隐藏 :after / :before 伪类

Question

可能重复：
jQuery 和伪类

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

但是，我只是好奇是否有人设法找到隐藏 :after 或 :before 的方法。这是我尝试过的但不起作用的方法。

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

只是为了给你上下文，我有一个包含搜索表单等的 div，当搜索处于活动状态时，我想在 div 下启用一个小箭头指示器，指向找到的项目列表（使用 :after 通过 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 交换这些类。

编辑：混淆名称