我们如何改变sudo类的属性如下：之前和：之后在javascript

我正在创建自定义手风琴它创建，但问题是我需要手风琴上的加号和减号图标，当我点击手风琴的加号手风琴打开并在负号上加上符号变化，反之亦然，代码如下表示谢谢）;积极手风琴的加号不是全部。我的意思是我会点击第一手风琴的第一手风琴变化的加号，其余部分将保持相同我们如何改变sudo类的属性如下：之前和：之后在javascript

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>

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

CSSS

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/

来源

2017-04-12 Mujtaba Hussain Bhat

@ Rehban卡特里但我需要它在JavaScript不是在jQuery的....如果不介意的话可以为您plzz uDate公司与您的代码小提琴，将apppericiated –

参见[JQuery的选择伪元素：后]（http://stackoverflow.com/questions/27254674/jquery-select-pseudo-element-after/） – guest271314

@ guest271314你可以请更新我的小提琴，这样我就可以很容易地 –

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

在javascript你错过了cfun在$("button").click(funtion(){;将$(".accordion").removeClass('accordion-icon').addClass('minus-icon')改为$(this).toggleClass('accordion-icon minus-icon')，以引用当前的button元素，而不是所有的.accordion元素。

在css如果希望"-"在的"+"同一位置被渲染，同样css应在.minus-icon:before选择应用，除了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>

来源

2017-04-12 15:18:41 guest271314

我们如何改变sudo类的属性如下：之前和：之后在javascript

回答

相关问题