我有一个 Accordion ,右边有一个向下的箭头。如果按钮处于事件状态,我希望该箭头转换 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 {
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">
<p class="faq-q">Where does the fundraising money go?</p>
<p class="faq-a">Some text here to answer the question</p>
</div>
我有一个 Accordion ,右边有一个向下的箭头。如果按钮处于事件状态,我希望该箭头转换 180 度并垂直居中。
当我将鼠标悬停在按钮上时,它被赋予了一个“事件”类,但我如何才能定位按钮中包含的箭头?
最佳答案
是这样的吗?
button.accordion.active i.fa.fa-angle-down {
transform: rotate(180deg);
}
(或者您可以以相同的方式定位伪::before 元素)。
关于jquery - 选择按钮时将箭头倒置并居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46812091/