如何在按钮单击中更改向上箭头和向下箭头

Question

我正在使用 css 和 javascript 做一个切换按钮，我的 html 部分是

<div class="banner" id="btn-accod">
 <button  class="banner-accordin" onclick="bannerOpen()">Here's how you know <i  class="fa fa-angle-down" id="donar"></i></button> 
</div> 

脚本部分是

function bannerOpen(){
    var ban = document.getElementById("banner-content");
     var arrow = document.getElementById("donar");
        if (ban.style.display === "none") {
            ban.style.display = "block";
            arrow .classList.toggle("fa-angle-up");
        } else {
            ban.style.display = "none";
        }
    
  }

但没有变化，也没有错误显示为什么？

Answer 1

希望这会奏效！

<div class="banner" id="btn-accod">
 <button class="banner-accordin" onclick="bannerOpen()">Here's how you know <i class="fa fa-angle-down" id="donar"></i></button> 
</div> 

function bannerOpen(){
    var ban = document.getElementById("banner-content");
     var arrow = document.getElementById("donar");
        ban.style.display === "none" ?
            ban.style.display = "block";
            arrow.classList.toggle("fa-angle-up");
            arrow.classList.toggle("fa-angle-down");
        :
            ban.style.display = "none"
            arrow.classList.toggle("fa-angle-up");
            arrow.classList.toggle("fa-angle-down");}