使用jQuery切换伪元素

Question

我正在尝试使用jQuery切换:after伪元素的显示（即显示/隐藏它）。我成功切换了div的显示，但现在希望使用:after。

正在使用:after在框中创建箭头。

我的尝试可以在这里看到：http://jsfiddle.net/beechboy707/7um9knxt/1/

以下是它的摘录，显示了与CSS选择器相关的jQuery：

$("#supportus-button-1").click(function () {
$(".supportus-button:after").toggle();
});

Answer 1

我认为这里最简单的方法是使用CSS类来限制应用:after规则的范围：

.supportus-button:not(.clicked):after { ... }

这是一个更新的小提琴：http://jsfiddle.net/jjcwqjLw/

所有current browsers支持:not CSS功能：支持is the same和:after伪元素。

Answer 2

虽然您无法使用jQuery来定位伪元素，但您可以使用更具体的类来更改它们。这是一个例子：

.supportus-button.clicked:after {
    display: none;
}

Demo