选择按钮时，将箭头上下颠倒并居中

Question

我有一把手风琴，右边有一个向下的箭头。如果按钮处于活动状态，我希望该箭头转换180度并垂直居中。

当我将鼠标悬停在按钮上时，会给它一个＆＃34;活跃的＆＃34;但是如何定位按钮中包含的箭头？

＆＃13;

＆＃13;

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

＆＃13;

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 {
	max-width: 95%;
}

＆＃13;

<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">
	<p class="faq-q">Where does the fundraising money go?</p>
	<p class="faq-a">Some text here to answer the question</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我有一把手风琴，右边有一个向下的箭头。如果按钮处于活动状态，我希望该箭头转换180度并垂直居中。

当我将鼠标悬停在按钮上时，会给它一个＆＃34;活跃的＆＃34;但是如何定位按钮中包含的箭头？

Answer 1

这样的东西？

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

（或者你可以用同样的方式定位伪:: before元素。）

Answer 2

你走了。我将按钮内容更改为flex而不是float。我认为这是更好的选择。

＆＃13;

＆＃13;

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

＆＃13;

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 {
	max-width: 95%;
}

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

＆＃13;

<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">
	<p class="faq-q">Where does the fundraising money go?</p>
	<p class="faq-a">Some text here to answer the question</p>
</div>

＆＃13;

＆＃13;

＆＃13;