Javascript 如何通过单击并使用vanilla js更改div的图标？

我正在尝试单击标题以显示内容并更改标题旁边的图标

其主要思想是有一个加号，单击时，内容可见，图标变为减号

我与scss和vanilla js合作，目前为止我有以下几点：

var jsaccordion={
初始化：函数（目标）{
var headers=document.queryselectoral（“#”+target+”.accordion titulo”）；
if（headers.length>0）{for（var header of headers）{
head.addEventListener（“单击”，jsaccordion.select）；
}}
},
选择：函数（）{
var contents=this.nextElementSibling；
contents.classList.toggle（“打开”）；
}
};
addEventListener（'load'，function（））{
jsaccordion.init（“accordion定义”）；
});
.accordion titulo:：before{
内容：“.”；
显示：块；
背景：url（“../../Iconos/Icono\some icon”）；
背景重复：无重复；
背景位置：中心；
光标：指针；
宽度：35px；
高度：35px；
颜色：透明；
浮动：对；
}
.手风琴{
显示：无；
颜色：#808080；
填充：15px；
}
.手风琴-文本打开{
显示：块；
}
.手风琴-泰特罗公开赛{
背景：url（“../../Iconos/Icono\some-different-icon.svg”）；
背景重复：无重复；
背景位置：98%居中；
}

?？
我的同僚们都是精英。哦，我的生命是必须的！自由主义者是赞美之士，他们的工作是暂时的

像这样的东西可以做你想做的事情（可能还有很多其他更好的方法，但这就是你所描述的）


var jsaccordion={
初始化：函数（目标）{
var headers=document.queryselectoral（“#”+target+”.accordion titulo”）；
if（headers.length>0）{for（var header of headers）{
head.addEventListener（“单击”，jsaccordion.select）；
}}
},
选择：函数（）{
var contents=this.nextElementSibling；
if（this.innerHTML.includes（“+”））{
this.innerHTML=this.innerHTML.replace（“+”，“-”）；
}否则{
this.innerHTML=this.innerHTML.replace（“-”，“+”）；
}
contents.classList.toggle（“打开”）；
}
};
addEventListener（'load'，function（））{
jsaccordion.init（“accordion定义”）；
});
.accordion titulo:：before{
内容：“.”；
显示：块；
背景：url（“../../Iconos/Icono\some icon”）；
背景重复：无重复；
背景位置：中心；
光标：指针；
宽度：35px；
高度：35px；
颜色：透明；
浮动：对；
}
.手风琴{
显示：无；
颜色：#808080；
填充：15px；
}
.手风琴-文本打开{
显示：块；
}
.手风琴-泰特罗公开赛{
背景：url（“../../Iconos/Icono\some-different-icon.svg”）；
背景重复：无重复；
背景位置：98%居中；
}

?+
我的同僚们都是精英。哦，我的生命是必须的！自由主义者是赞美之士，他们的工作是暂时的

从您的代码中，似乎图标
某些不同的图标
应该放在a:before选择器中，因为图标
某些图标
正在a:before中添加

另外，在JavaScript端，您正在将类
open
设置为
.accordion titulo
的下一个同级元素（即
.accordion texto
）。因此，您的
.accordio titulo.open
样式将永远不适用

相反，我将在
.accordio titulo
元素中设置
打开
类，并使用CSS同级选择器
+
显示
.accordion texto

包装所有这些，代码将如下所示：


var jsaccordion={
初始化：函数（目标）{
var headers=document.queryselectoral（“#”+target+”.accordion titulo”）；
if（headers.length>0）{for（var header of headers）{
head.addEventListener（“单击”，jsaccordion.select）；
}}
},
选择：函数（）{
这个.classList.toggle（“打开”）；
}
};
addEventListener（'load'，function（））{
jsaccordion.init（“accordion定义”）；
});
.accordion titulo:：before{
内容：“；
显示：块；
背景：url（“../../Iconos/Icono\some icon”）；
背景重复：无重复；
背景位置：中心；
光标：指针；
宽度：35px；
高度：35px；
颜色：透明；
浮动：对；
}
.手风琴{
显示：无；
颜色：#808080；
填充：15px；
}
.accordion-titulo.open+.accordion texto{
显示：块；
}
.手风琴提图罗.打开：：之前{
背景：url（“../../Iconos/Icono\some-different-icon.svg”）；
背景重复：无重复；
背景位置：98%居中；
}

?？
我的同僚们都是精英。哦，我的生命是必须的！自由主义者是赞美之士，他们的工作是暂时的

这是一个纯CSS解决方案，使用隐藏复选框和同级选择器（~）切换相邻div的可见性和before元素的符号。我还大胆地把每件事都设计得稍有不同

如果您希望在单击标题时自动关闭已打开的部分，请使用具有相同
名称的单选按钮