如何动态更改具体化.css图标

Question

我有一个引导下拉列表折叠。 我将其用作下拉超级菜单. 有一个图标，我希望通过单击它来更改它。我使用物化.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(_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>

Answer 2

首先检查文本内容，然后相应地更改它：

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>