0

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

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

我已经在 SO 尝试了许多与类切换主题有关的事情，但我无法让它发挥作用。使用 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>
4

2 回答 2

1

您只需要这样：

<script language="javascript">

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

</script>
于 2013-02-20T19:38:37.797 回答
0

你有没有尝试过：

if (className indexOf("class1")){}

我建议您使用 jQuery 的 .removeClass('class1')，.addClass('class2')以获得更易读、更符合浏览器的代码。

于 2013-02-18T16:01:41.120 回答