如何使用boot-strap和jQuery在两个没有按钮的图标之间进行切换

给定一个有两个图标的HTML文档，任务是在用户点击图标的时候，每次都交替显示图标。这个任务可以在jQuery（一个JavaScript库）的帮助下轻松完成。

方法：方法是简单地给两个图标添加一个 “on click “事件监听器，并使用jQuery切换两个图标的CSS类。这些类最终负责显示图标库（本例中为Fontawesome）中的一个特定图标。在这里，我们使用了两个图标。

一个类名为 “fa-bars”（菜单图标）。
一个是班级名称为 “fa-times”（十字图标）的。

每当用户点击菜单图标时，它的 “fa-bars “类将被切换为 “fa-times”，因此十字图标将被显示，反之亦然。

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0" />
  
    <!--Bootstrap CSS CDN-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
  
    <!--Font Awesome Icons-->
    <script src="https://kit.fontawesome.com/f2c150d561.js"
        crossorigin="anonymous">
    </script>
      
    <!--jQuery CDN-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <!--First Icon-->
    <i class="fas fa-bars m-5" style="font-size: 60px;"></i>
      
    <script>
         $(".fas").click(function () {$ (".fas").toggleClass("fa-bars fa-times");
        });
    </script>
</body>
  
</html>

输出:

如何使用boot-strap和jQuery在两个没有按钮的图标之间进行切换？