jQuery and hiding :after / :before pseudo classes

Question

可能的重复项：
jQuery 和伪类

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

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

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

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

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交换即可。

编辑：混淆名称