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>

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/

Answer 1

重新阅读问题后，＆＃34;复制＆＃34;投票不合适。问题javascript实际上并未尝试更改css :before或:after，而是切换元素的.className。

javascript c fun $("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>， sed属性。

＆＃13;

$ echo "1 2 3 hi" | sed -r 's/[ \t]+/\n/g'
1
2
3
hi

＆＃13;

$ echo "1 2 3 hi" | sed -r 's/^([^ \t]+).+/\1/'
1

＆＃13;

$ sed -r 's/^([^ \t]+).+/\1/' file.txt

＆＃13;

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

1 个答案: