使用纯 JS 为 bootstrap 手风琴添加向上和向下箭头

Question

我的代码：

<div class="panel" style="margin-left: -15px;">
                <div class="panel-heading">
                    <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">

                        <div class="groupicon">
                            <div class="groupicontext">P</div>
                        </div>
                        <div class="grouptext">
                            <div class="grouptitle">Physics</div>
                        </div>
                        <img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';">

                    </div>      
                </div></div>

function changeArrow(id){
    if(id.src = '../assets/images/down.png'){
        id.src = '../assets/images/up.png';
    } else {
        id.src = '../assets/images/down.png';
    }
}

目前，箭头没有变化。

怎样才能让箭头变成up.png？

或者更好，有动画和旋转180度吗？

任何帮助都会很棒 - 谢谢！

Answer 1

在 if 条件下使用 == 而不是 = 并使用 getAttribute("src") 而不是 src 因为 src 直接给出整个路径，而 getAttribute 给你里面的内容

function changeArrow(id){
    console.log(id.src)
    if(id.getAttribute("src") == '../assets/images/down.png'){
        id.src = '../assets/images/up.png';
    } else {
        id.src = '../assets/images/down.png';
    }
}
function removevBgs(){}

<div class="panel" style="margin-left: -15px;">
  <div class="panel-heading">
      <div class="vgroupholder panel-title" data-parent="#accordion" data-toggle="collapse" href=".titlePhysics" onclick="removevBgs();" style="background-color: transparent;">

          <div class="groupicon">
              <div class="groupicontext">P</div>
          </div>
          <div class="grouptext">
              <div class="grouptitle">Physics</div>
          </div>
          <img onclick="changeArrow(this);" src="../assets/images/down.png" width="45px" style="margin-left: 240px; opacity: 1;" onmouseover="this.style.opacity='75%';" onmouseout="this.style.opacity='100%';">

      </div>      
  </div>

</div>

使用纯 JS 为 bootstrap 手风琴添加向上和向下箭头

Add Up and down arrows to bootstrap accordion with pure JS

html

javascript

accordion

bootstrap-4