jQuery 和隐藏 :after / :before 伪类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11354270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery and hiding :after / :before pseudo classes
提问by Andrew Lank
Possible Duplicate:
jQuery and pseudo-classes
可能的重复：
jQuery 和伪类
I tried hiding the :after pseudo class via jQuery in a number of ways but with no success, I've found another solution by adding a sort of empty div under my div that contains the :after content and then hiding the div entirely so it gives the same effect.
我尝试通过 jQuery 以多种方式隐藏 :after 伪类，但没有成功，我找到了另一种解决方案，即在我的 div 下添加一种包含 :after 内容的空 div，然后将 div 完全隐藏起来产生相同的效果。
However I was just curious if anyone had managed to find a way to hide the :after or :before stuff. Here is what I tried that didn't work.
但是，我只是好奇是否有人设法找到隐藏 :after 或 :before 内容的方法。这是我尝试过但不起作用的方法。
$('.search_box:after').hide();
$('.search_box:after').css('display', 'none');
Just to give you the context, I have a div that contains the search form etc, and when the search is active I want to enable a little arrow indicator under the div pointing like to the list of found items (built with :after via CSS) and when nothing is found, or it defaults to the full out list (since nothing was found) then I want to hide it.
只是为了给你上下文，我有一个包含搜索表单等的 div，当搜索处于活动状态时，我想在 div 下启用一个小箭头指示器，指向找到的项目列表（使用 :after 通过 CSS 构建） ) 并且当没有找到任何东西时，或者它默认为完整的列表（因为没有找到任何东西）然后我想隐藏它。
回答by TJ VanToll
You cannot do this. Your best bet is to use a class on the element to toggle the display of the pseudo element.
你不可以做这个。最好的办法是在元素上使用一个类来切换伪元素的显示。
<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>
Live example- http://jsfiddle.net/4nbnh/
回答by ThinkingStiff
You can dynamically add a <style>block to override it. Give it an idand you can remove it when needed.
您可以动态添加一个<style>块来覆盖它。给它一个id，您可以在需要时将其删除。
Demo: http://jsfiddle.net/ThinkingStiff/TRLY2/
演示：http: //jsfiddle.net/ThinkingStiff/TRLY2/
Script:
脚本：
$( '#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:
?HTML：
<div id="hello">hello</div>?
CSS:
CSS：
#hello::after {
content: "goodbye";
}?
回答by dcpomero
ThinkingStiff has a pretty good idea.
ThinkingStiff 有一个很好的主意。
You could also add and remove a class to for your search box, and only use the after tag with that.
您还可以为您的搜索框添加和删除一个类，并且只使用 after 标签。
Something like .hide:after { display:none }and .show:after { /* normal css */ }. Then just swap these classes with javascript.
类似于.hide:after { display:none }和 的东西.show:after { /* normal css */ }。然后只需用 javascript 交换这些类。
edit: mixed up the names
编辑：混淆名称
