使用擴展div切換按鈕的Javascript類

我有一個網站在頁眉上方的頂欄中有一個擴展的控件區域。您可以在此處看到：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/使用擴展div切換按鈕的Javascript類

單擊箭頭展開此區域時，可以看到它切換到面向相反方向的不同按鈕。當再次點擊該區域以使該區域恢復時，箭頭不會切換回原來的位置。

我在這裏嘗試了許多與類切換主題有關的事情，但是我無法得到任何工作。 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>

來源

2013-02-18 Michael

當你的頁面加載'＃displayText'有兩類：'擴大-arrow'和'崩塌arrow'。您的切換功能只能刪除第一類，但無法將其添加回來。查看你所鏈接的答案的「檢查一個班級是否已經被應用」部分。並根據需要使用它來添加所需的類。 – hsan 2013-02-18 15:47:23

所有你需要的僅僅是這樣的：

<script language="javascript"> 

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

</script>

來源

2013-02-20 19:38:37

我可以看到你已經在你的網站上實現了這一點，並且它按預期工作。謝謝！ – 2013-02-21 16:26:49

謝謝你好，先生！ +50 – Michael 2013-02-21 21:13:55

你試過：

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

我建議你使用jQuery的 .removeClass('class1')，.addClass('class2')爲更具可讀性，瀏覽器兼容的代碼。

來源

2013-02-18 16:01:41 Piyuesh

他顯然不使用基於他使用document.getElementById的jQuery。我認爲答案更簡單：使用jQuery。 .toggle，.addClass/removeClass等，在jQuery中有幾種不同的方法。 – 2013-02-20 19:46:43

他的網站包含jQuery，它在問題中被標記。也許他只是不熟悉它。 – Danny 2013-02-20 19:53:05

使用擴展div切換按鈕的Javascript類

回答

相關問題