當按鈕被選中時，將箭頭倒置並居中

Question

我有一個手風琴，右下方有一個向下的箭頭。如果按鈕處於活動狀態，我希望箭頭轉換180度並垂直居中。

當我將鼠標懸停在按鈕上時，會給出一類「活動」，但我如何定位按鈕中包含的箭頭？

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

i.fa.fa-angle-down { 
 
    float: right; 
 
    padding-top: 8px; 
 
} 
 

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

 
button.accordion.active, button.accordion:hover { 
 
    color: #58595b; 
 
} 
 

 
div.panel div.question:before { 
 
    content: "\0051\003a"; 
 
padding-right: 10px; 
 
display:inline-block; 
 
font-weight: 700; 
 
} 
 

 

 

 

 
div.panel { 
 
color: #77787b; 
 
transition: 0.4s; 
 
cursor: default; 
 
font-size: 16px; 
 
} 
 

 
div.panel p { 
 

 
} 
 

 
div.panel p.faq-a { 
 
padding-left: 1.7em; 
 
} 
 

 
div.panel div.question { 
 
padding-bottom: 17.5px; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
} 
 

 
div.panel div.question:hover { 
 
color: #939598 !important; 
 
} 
 

 
p.faq-q { 
 
display: inline-block; 
 
font-weight: 700; 
 
max-width: 900px; 
 
vertical-align: top; 
 
} 
 

 
#faq h2 { 
 
color: #e2231a; 
 
} 
 

 
#faq { 
 
width: 970px; 
 
margin: 0 auto; 
 
} 
 

 
p.faq-q { 
 
\t max-width: 95%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/ac43c2a4c5.js"></script> 
 
<h2>CHOOSE A CATEGORY</h2> 
 
<button class="accordion">fundraising<i class="fa fa-angle-down"></i></button> 
 
<div class="panel"> 
 
<div class="question"> 
 
\t <p class="faq-q">Where does the fundraising money go?</p> 
 
\t <p class="faq-a">Some text here to answer the question</p> 
 
</div>

我有一個手風琴，有一個向下的箭頭浮動的權利。如果按鈕處於活動狀態，我希望箭頭轉換180度並垂直居中。

當我將鼠標懸停在按鈕上時，會給出一類「活動」，但我如何定位按鈕中包含的箭頭？

Answer 1

是這樣的？

button.accordion.active i.fa.fa-angle-down { 
    transform: rotate(180deg); 
} 

（或者你可以以同樣的方式定位僞:: before元素）。

Answer 2

你在這裏。我改變了按鈕的內容而不是浮動。我認爲這是更好的選擇。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     var panel = this.nextElementSibling; 
 
     if (panel.style.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

i.fa.fa-angle-down { 
 
} 
 

 
button.accordion { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
border-radius: 0px; 
 
margin-bottom: 10px; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    color: #58595b; 
 
} 
 

 
div.panel div.question:before { 
 
    content: "\0051\003a"; 
 
padding-right: 10px; 
 
display:inline-block; 
 
font-weight: 700; 
 
} 
 

 

 

 

 
div.panel { 
 
color: #77787b; 
 
transition: 0.4s; 
 
cursor: default; 
 
font-size: 16px; 
 
} 
 

 
div.panel p { 
 

 
} 
 

 
div.panel p.faq-a { 
 
padding-left: 1.7em; 
 
} 
 

 
div.panel div.question { 
 
padding-bottom: 17.5px; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    display: none; 
 
    background-color: white; 
 
} 
 

 
div.panel div.question:hover { 
 
color: #939598 !important; 
 
} 
 

 
p.faq-q { 
 
display: inline-block; 
 
font-weight: 700; 
 
max-width: 900px; 
 
vertical-align: top; 
 
} 
 

 
#faq h2 { 
 
color: #e2231a; 
 
} 
 

 
#faq { 
 
width: 970px; 
 
margin: 0 auto; 
 
} 
 

 
p.faq-q { 
 
\t max-width: 95%; 
 
} 
 

 
button.active i { 
 
transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/ac43c2a4c5.js"></script> 
 
<h2>CHOOSE A CATEGORY</h2> 
 
<button class="accordion">fundraising<i class="fa fa-angle-down"></i></button> 
 
<div class="panel"> 
 
<div class="question"> 
 
\t <p class="faq-q">Where does the fundraising money go?</p> 
 
\t <p class="faq-a">Some text here to answer the question</p> 
 
</div>