Javascript 如何更改&x2B；到-单击父菜单时

单击菜单父菜单项时如何将+更改为-。我正在使用jquery查找target:：after元素，但我找不到使用jquery将伪元素作为目标的方法

我想将下面的css更改为单击perent菜单时

.ir-nav-w > ul li::after {
    /* padding-left: 10px; */
    text-transform: uppercase;
    content: "-";
    position: absolute;
    left: 15px;
    top: 4px;
    line-height: 30px;
    font-size: 20px;
    z-index: 0;
}

$（“.nav-w>ul>li>a”）。单击（函数（）{
$（this.next（）.slideToggle（）；
});
//打开活动列表
$（'.nav-w ul li'）.children（）.has（'.active menu'）.css（'display'，'block'）；
//将url与导航url进行比较以显示活动url
$（函数（）{
//var url=window.location.href；
var url=window.location.pathname；
var pgurl=window.location.href.substr(
window.location.href.lastIndexOf（“/”）+1
);
$（“.nav-w ul li a”）。每个（函数（）{
if（$（this.attr（“href”）==url | |$（this.attr（“href”）==“”）{
$（此）.addClass（“活动菜单”）；
}
});
log（“url:+window.location.pathname”）；
});
.nav-w a{
颜色：黑色；
填充：10px 15px；
左侧填充：35px；
文字装饰：无；
显示：块；
边框底部：1px实心#f1f1；
字体大小：12px；
字号：600；
/*颜色：#178B43！重要*/
颜色：#7575；
}
/*ul内部内容区*/
.nav-w ul{
左边距：0px；
列表样式类型：无；
边缘底部：0px；
}
李国伟先生{
/*左侧填充：10px*/
文本转换：大写；
位置：相对位置；
宽度：100%；
}
/*内容区内的ol*/
.nav-w>ul{
左侧填充：0px；
右边填充：0px；
}
.nav-w ul>li ul{
左侧填充：0px；
右边填充：0px；
显示：无；
}
.活动菜单{
颜色：红色！重要；
}
.nav-w>ul li:：之后{
文本转换：大写；
内容：“+”；
位置：绝对位置；
左：15px；
顶部：4px；
线高：30px；
字体大小：20px；
z指数：0；
}
.nav-w>ul li ul li：：之后{
文本转换：大写；
内容：“；
位置：绝对位置；
左：0px；
顶部：5px；
线高：32px；
字体大小：20px；
z指数：0；
}
.nav-w ul li ul li a{
左侧填充：45px；
}
.nav-w a:悬停{
背景:#f5；
左边框：2px实心#178B43；
}




















我的方法是在单击父菜单后将其添加到父菜单中，例如
打开

然后在css中添加一个特殊的修改器：

.nav-w>ul li.open:：after{
内容：“—”
}

当再次单击时，删除类
open
实际上不可能在
:after
之后设置目标，因为它不是DOM的一部分，不能通过JavaScript代码访问。这不是jQuery的限制

您可以在元素本身上设置一个类，并在设置类时更改
：after
规则，即：

.nav-w > ul li.active::after 
{
  content: "-"
}

将活动类添加到锚点的父级：

$(".nav-w > ul > li a").click(function () {
   $(this).next().slideToggle();
   $(this).parent().toggleClass('active');
});

并在活动类上替换：：after：

.nav-w > ul li.active::after {
   content: '-'
}

你可以用：后道具

你可以这样做

.li-item::after{
     content: "+";
}
.li-item-minus::after{
     content: "-" !important;
}

在jQuery中，您可以在单击每个列表项时切换class
.li item减去

jQuery(".naw-v ul li").on("click", function(){
  jQuery(this).toggleClass("li-item-minus");
});

这意味着-单击此li元素，您可以切换Class
li项减去与主项内容不同的
。
您不能操作：after，因为从技术上讲它不是DOM的一部分，因此任何JavaScript都无法访问它。但是，您可以在指定后使用new:：添加一个新类

将此添加到您的代码中：

// JS
const $listItems = $('.ir-nav-w > ul li');
$listItems.onClick(
  $listItems.removeClass('closed');
  this.addClass('closed')
);

// CSS
.ir-nav-w > ul li.closed::after {
  content: "+";
}

诀窍是添加css：

.nav-w>ul li.选定：：之后{
内容：“-”；
}

并在单击时切换选定的类：

$（“.nav-w>ul>li>a”）。单击（函数（）{
$（this.parent（）.toggleClass（“选定”）；
$（this.next（）.slideToggle（）；
});


$（“.nav-w>ul>li>a”）。单击（函数（）{
$（this.parent（）.toggleClass（“选定”）；
$（this.next（）.slideToggle（）；
});
//打开活动列表
$（'.nav-w ul li'）.children（）.has（'.active menu'）.css（'display'，'block'）
.nav-w a{
颜色：黑色；
填充：10px 15px；
左侧填充：35px；
文字装饰：无；
显示：块；
边框底部：1px实心#f1f1；
字体大小：12px；
字号：600；
/*颜色：#178B43！重要*/
颜色：#7575；
}
/*ul内部内容区*/
.nav-w ul{
左边距：0px；
列表样式类型：无；
边缘底部：0px；
}
李国伟先生{
/*左侧填充：10px*/
文本转换：大写；
位置：相对位置；
宽度：100%；
}
/*内容区内的ol*/
.nav-w>ul{
左侧填充：0px；
右边填充：0px；
}
.nav-w ul>li ul{
左侧填充：0px；
右边填充：0px；
显示：无；
}
.活动菜单{
颜色：红色！重要；
}
.nav-w>ul li:：之后{
文本转换：大写；
内容：“+”；
位置：绝对位置；
左：15px；
顶部：4px；
线高：30px；
字体大小：20px；
z指数：0；
}
.nav-w>ul li.选定：：之后{
内容：“-”；
}
.nav-w>ul li ul li：：之后{
文本转换：大写；
内容：“；
位置：绝对位置；
左：0px；
顶部：5px；
线高：32px；
字体大小：20px；
z指数：0；
}
.nav-w ul li ul li a{
左侧填充：45px；
}
.nav-w a:悬停{
背景:#f5；
左边框：2px实心#178B43；
}




















psuedo内容不能随jquery更改，但您可以根据单击/滑动切换添加/删除类，并随类显示+/-。我们如何才能