如何動態更改 materialize.css 圖標

Question

我有一個引導下拉菜單崩潰。 我將它用作下拉菜單 megamenu 。 有一個圖標，我希望通過單擊它來更改它。 我使用 materialize.css 圖標包，所以我必須更改文本，而不是類。 我用過這個

 function ChangeIcon(){ document.getElementById("icon-change").textContent="close"; }

 <i onclick="ChangeIcon()" id="icon-change" data-toggle="collapse" data-target="#mega-menu-dropdown" class="material-icons">menu</i>

但問題是，當我想關閉它時，圖標不會更改為其第一種類型（菜單 -> 關閉，反之亦然）。 我該怎么做才能解決這個問題？

Answer 1

首先檢查文本內容，然后相應地更改它：

 function ChangeIcon(){ if(document.getElementById("icon-change").textContent == 'menu') document.getElementById("icon-change").textContent="close"; else if(document.getElementById("icon-change").textContent == 'close') document.getElementById("icon-change").textContent="menu"; }

 <i onclick="ChangeIcon()" id="icon-change" data-toggle="collapse" data-target="#mega-menu-dropdown" class="material-icons">menu</i>

Answer 2

function ChangeIcon(_this){
    if(_this.textContent === "close") {
        _this.textContent = "menu";
    } else {
        _this.textContent = "close";
    }
}

<i onclick="ChangeIcon(this)" id="icon-change" data-toggle="collapse" data-target="#mega-menu-dropdown" class="material-icons">menu</i>