带有扩展 div 的按钮上的 Javascript 类切换

Question

我有一个网站，在标题上方的顶部栏中有一个扩展的小部件区域。你可以在这里看到:http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

当点击箭头展开这个区域时，你可以看到它切换到另一个朝向相反方向的按钮。第二次单击它以恢复此区域时，箭头不会切换回其原始位置。

我已经在 SO 上尝试了很多与类(class)切换主题相关的事情，但我无法让它发挥作用。 Change an element's class with JavaScript

如何使用下面已有的代码最好地将此按钮上的类从展开箭头切换为折叠箭头？就此而言，我是否应该简单地删除下面的代码并使用更简单/更好的代码？

CSS:

.collapse-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('../../../images/collapse-arrow.png');
}

.expand-arrow {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    background: url('../../../images/expand-arrow.png');
}

Javascript

<script language="javascript"><!-- THIS IS THE SLDING TOP BAR -->
    (function() {
      var open = false;     
      toggle = function() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        ele.style.height = (open ? 0 : ele.scrollHeight)+"px";
        document.getElementById("displayText").className = 
        document.getElementById("displayText").className.replace
        ( /(?:^|\s)expand-arrow(?!\S)/g , '' );                     
        open = !open;                   
      }
    })();   
    </script>

HTML:

按钮:

<a class="expand-arrow" id="displayText" href="javascript:toggle();"></a>

Answer 1

你只需要这个:

<script language="javascript">

function toggle(){
    document.getElementById("displayText").classList.toggle('expand-arrow');
}

</script>