首页 > 解决方案 > 使用“切换”单击更改图标

问题描述

我有与这里相同的 HTML、CSS 和 Javascript:单击后如何关闭此菜单 请告诉我单击并打开顶部导航后如何将汉堡图标更改为关闭 (x) 图标(不使用图标旋转)导航栏。我尝试了此处发布的内容但失败了(我确实添加并尝试了那里提到的所有内容,包括<i id="click-spanish" class="fa fa-caret-down"></i> and <div id="spanish-examples"></div>):单击时更改切换图标

标签: javascripthtmlcss

解决方案


您可以将变量用于类并使用 onclick 函数来切换变量

    let icon = true

    const changeIcon = () => {
    icon = !icon
    }

在 html 中你可以使用 like

    <i id="click-spanish" onclick="changeIcon()" class={icon ? "fa fa-caret-down":"some other icon"}> </i>

推荐阅读