单击文本时更改图标

Question

我是编码新手，正在尝试汉堡式菜单。

我的成就：当用户点击汉堡包菜单图标时，它变成了关闭图标。

我在汉堡菜单图标前添加了一个文本标签，但问题是我不知道如何让这个文本在单击时更改图标。

如果可以请指教。

非常感谢

此致，维切斯拉夫

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Title</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">

    <!-- Font Awesome -->

    <link href="Fontawesome/css/all.css" type="text/css" rel="stylesheet">

    <!-- Styles -->
    <link href="CSS/stylesheet.css" rel="stylesheet">

</head>

<body>

<!-- Header -->
    <header id="header" class="header d-flex align-items-center fixed-top">

    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

        <a href="index.html" class="logo d-flex align-items-center"><h1>Logo</h1></a>
 
        <div class="topnav" id="myTopnav">

            <ul class="nav-links">

            <input type="checkbox" id="checkbox_toggle"/>
            <label for="checkbox_toggle" class="hamburger"><span class="menu_text" onclick="changeIcon(fa-bars)">Menu</span> <i class="fa-solid fa-bars" onclick="changeIcon(this)"></i></label>
    
            <div class="menu">
    
                <li><a href="#">First</a></li>
                <li><a href="#">Second</a></li>
            </div>
        </ul>
        </div>
    </div>

    </header>

<footer></footer>

</body>

<script src="Bootstrap/js/bootstrap.js"></script>
<script src="JS/menu_icon_toggle.js"></script>

</html>

JS

 let changeIcon = function(icon) {
        icon.classList.toggle('fa-xmark')
    }

Answer 1

您可以将 changeIcon 函数修改为

let changeIcon = function () {
        document.getElementById("text_icon").classList.toggle("fa-xmark");
    };

并将标记标记为

<label for="checkbox_toggle" class="hamburger">
          <span
            id="menu_text_item"
            class="menu_text"
            onclick="changeIcon()"
          >
            Menu
          </span>
          <i class="fa-solid fa-bars" id="text_icon" onclick="changeIcon()">
          </i>
        </label>

onClicking 菜单 text/icon 不传递任何内容，在 changeIcon 函数中，您可以使用 document.getElementById 访问图标节点，然后切换 css 列表

单击文本时更改图标

Change icon when the text is clicked

html

javascript