0

ヘッダーの上のトップバーに拡張ウィジェット領域があるWebサイトがあります。あなたはここでこれを見ることができます：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")){}

より読みやすく、ブラウザに準拠したコードには.removeClass('class1')、jQueryを使用することをお勧めします 。.addClass('class2')

于 2013-02-18T16:01:41.120 に答える