如何在javascript中更改sudo类的属性，如：before和：after

我正在创建它创建的自定义手风琴，但问题是，当我单击手风琴时，我需要在该手风琴上添加加号和减号图标手风琴打开加号，加号在减号中更改，反之亦然，下面的代码提前给出了感谢）；活动手风琴上的加号并非全部改变。我的意思是我会点击第一个手风琴，第一个手风琴的加号会改变，其余的会保持不变

HTML

---

小提琴：

重新阅读问题后，“重复”投票是不合适的<问题中的code>javascript实际上并没有试图更改元素的

css

:before

或

：after

，而是切换元素的

.className

在

javascript

中，您在

fun

之后在

$（“按钮”）中缺少
c
。单击（funtion（）{

；更改

$（“.accordion”）。删除类（“accordion-icon”）。将类（“减号图标”）添加到
$（此）。切换类（“accordion-icon减号图标”）
引用当前的
按钮
元素，而不是所有
.accordion
元素

在
css
处，如果希望将
“-”
呈现在
“+”
的相同位置，则应在
处应用相同的
css
。减号图标：在
选择器之前，除了
内容
属性


$（文档）.ready（函数（）{
$（“.accordion”）。单击（函数（）{
$（this）.toggleClass（“手风琴图标减去图标”）.next（.panel”）.toggle（）；
});
})；
button.accordion{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
边缘底部：5px；
}
按钮。手风琴。激活，
按钮。手风琴：悬停{
背景色：#ddd；
}
.手风琴图标：之前{
内容：“\002B”；
字体大小：13px；
颜色：#777；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.减图标：之前{
内容：“\2212”；
字体大小：13px；
颜色：#777；
字体大小：粗体；
浮动：对；
左边距：5px；
}
分区小组{
填充：4px20px；
显示：无；
背景色：#ddd；
边缘底部：10px；
}

手风琴
第一节
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

第二节
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

第三节
知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德

@Rehban Khatri但我需要javascript而不是jquery中的它……如果你不介意的话，你能不能用你的代码来调整一下，看看@guest271314你能不能更新一下我的提琴，这样我就可以轻松地得到它？你有没有尝试过实现这两种链接方法中的任何一种？@guest271314 47是的，我已经做过了
<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName('accordion');
var i;
for(i=0;i < acc.length;i++){
acc[i].onclick = function(){
var panel = this.nextElementSibling;
if(panel.style.display =="block"){
panel.style.display ="none";
}
else{
panel.style.display ="block";
panel.class
}
}
}
</script>

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom:5px;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd; 
}
button.accordion:before{
  content: '\002B';
    font-size: 13px;
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
div.panel {
    padding: 4px 20px;
    display: none;
    background-color: #ddd;
     margin-bottom:10px;
}