我们如何在 javascript 中更改 sudo 类的属性，例如 :before 和 :after

Question

我正在创建它创建的自定义手风琴，但问题是当我单击手风琴时，我需要该手风琴上的加号和减号图标，加号手风琴打开，加号更改为减号，反之亦然，下面是给出的代码提前致谢）;活动手风琴上的加号并非对所有人都发生变化。我的意思是我将点击第一个手风琴，第一个手风琴更改的加号将保持不变

HTML

<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>

js

<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>

CSS

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;
}

小提琴：https://jsfiddle.net/gncrhc5a/

Answer 1

重新阅读问题后，“重复”投票不合适。 javascript at Question 实际上并没有尝试更改css :before 或:after，而是切换元素的.className。

在javascript，你在fun$("button").click(funtion(){ 之后缺少c；将$(".accordion").removeClass('accordion-icon').addClass('minus-icon') 更改为$(this).toggleClass('accordion-icon minus-icon') 以参考当前button 元素，而不是所有.accordion 元素。

在css，如果您希望"-" 呈现在"+" 的相同位置，则应在.minus-icon:before 选择器上应用相同的css，content 属性除外。

$(document).ready(function() {
  $(".accordion").click(function() {
    $(this).toggleClass("accordion-icon minus-icon").next(".panel").toggle();
  });
});

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;
}

.accordion-icon:before {
  content: '\002B';
  font-size: 13px;
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.minus-icon:before {
  content: "\2212";
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Accordion</h2>

<button class="accordion accordion-icon">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 accordion-icon">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 accordion-icon">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>