按下時如何讓我的箭頭手風琴顯示一個向下的箭頭？

Question

我創建了一個手風琴，旁邊有一個箭頭指向它，我希望箭頭在點擊時指向下方。 我將如何做到這一點？ 我應該使用圖像而不是普通箭頭，還是可以按照我使用它的方式使用箭頭？ 這是我在 jsfiddle 中的代碼： https ://jsfiddle.net/homjt76L/2/

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

 h1 { text-align: center; } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .down { margin-right: 50px; float: left; transform: rotate(45deg); -webkit-transform: rotate(45); } .right { margin-right: 50px; float: left; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .collapsible { color: black; cursor: pointer; padding: 18px; width: 100%; border: solid thin; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { } .content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; }

 <h1>FAQ</h1> <button class="collapsible" data-toggle=""> <b>Questions and Answers</b><i class="arrow right"></i> </button> <div class="content"> <p>Lorem Ipsum...</p> </div>

Answer 1

我可能會將right類重命名為indicator ，然后添加這個

.collapsible.active .indicator{
  transform: rotate(45deg);
}

這意味着，你可以刪除down你寫的類

如果您還想添加一個小的過渡， indicator類將如下所示

.indicator {
    margin-right: 50px;
    float: left;
    transform: rotate(-45deg);
    transition: 0.2s ease transform;
}

Answer 2

在更改 className 時將圖標 className 向右更改為向下。

在這里查看： https : //jsfiddle.net/Dev024/t4fe6quL/2/

if(this.classList.contains("active"))
{
    this.childNodes[1].className = "arrow right"
}
else
{
    this.childNodes[1].className = "arrow down"
}

Answer 3

你可以像這樣放置一個css：

.collapsible.active .right:{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
 }