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下方启用一个小箭头指示器，指向找到的项目列表（通过CSS中的:after构建），当没有找到任何内容或者它默认显示完整列表（因为没有找到任何内容）时，我想将其隐藏。

- Andrew Lank

---

请参见此处：https://dev59.com/qGox5IYBdhLWcg3wyXRx - dcpomero

最后，我只是在搜索框下面使用了一个高度为0、宽度与搜索框相同的div，并对其进行了after样式设置。我隐藏/显示它而不是搜索框，但TJ VanToll在下面提供的解决方案也很好用。 - Andrew Lank

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/

- TJ VanToll

---

这是最佳选择，因为使用其他方法可以更改内容和颜色，但无法更改可见性。 - Maverick

感谢您的回答，这是我在互联网上找到的最佳解决方案... - Swap-IOS-Android

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";        
}​

- ThinkingStiff

Answer 3

ThinkingStiff有一个很好的想法。

你还可以为搜索框添加或删除一个类，并仅使用after标签。

例如.hide:after { display:none }和.show:after { /*普通css*/ }。然后只需使用javascript交换这些类。

编辑：混淆了名称。

- dcpomero