私はどのようにsudoクラスのプロパティを変更できますか：beforeと：after in javascript

Question

私はカスタムアコーディオンを作成していましたが、問題はアコーディオンのプラス記号をクリックするとプラスとマイナスのアイコンが必要ですアコーディオンが開き、マイナス記号でプラス記号が変化し、その逆もまたあります。アクティブなアコーディオンでは、プラス記号はすべてではなく変更されます。 https://jsfiddle.net/gncrhc5a/：私は、最初のアコーディオンの変更のプラス記号は、残りは同じ

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> 

に

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

フィドルのCSSをままになります、私は最初のアコーディオンをクリックします意味します

Answer 1

質問を再読した後、「重複」投票は適切ではありませんでした。 javascriptは実際にはcss:beforeまたは:afterの代わりに、要素の.classNameをトグルします。

javascriptfunの後にcが見つかりました。$("button").click(funtion(){になりました。すべての.accordion要素の代わりに、現在button要素を参照するように$(".accordion").removeClass('accordion-icon').addClass('minus-icon')を$(this).toggleClass('accordion-icon minus-icon')に変更してください。 cssで

あなたは"-"が"+"の同じ位置にレンダリングする場合は、同じcssはcontentプロパティを除き、.minus-icon:beforeセレクタに適用されるべきです。

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

Rehbanカトリ@