Question

使用classList.toggle和Font Awesome图标时，我遇到了一个非常令人困惑的问题。我希望我的汉堡菜单在点击时更改为X，并且我正在尝试使用JavaScript函数来完成此操作。我只是无法让它正常工作。奇怪的是，当我将X设置为默认图标，然后在点击时将图标类更改为汉堡菜单时，它完全正常。这是我的工作代码，将X更改为汉堡包：

function myFunction(x) {
  x.classList.toggle("fa-bars");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-times"></i>
</div>

工作正常。但是当我试图扭转顺序，将汉堡包改为X时，它不起作用。这是代码：

function myFunction(x) {
  x.classList.toggle("fa-times");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>

我必须遗漏一些东西。它是什么？！

Answer 1

执行toggle("fa-times")时，它不会删除fa-bars类，只会添加或删除fa-times类。当图标有class="fa fa-bars fa-times"时，fa-bars类具有优先权，因此您可以看到汉堡包。

您需要对两个类进行护目以使其可靠地工作。无论您最初设置哪个班级，这都会有效。

function myFunction(x) {
  x.classList.toggle("fa-times");
  x.classList.toggle("fa-bars");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>

Answer 2

你需要移除旧的两个栏，你可以切换这两个班级，并且任何订单都可以完美地运作

＆＃13;

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> 
<body>
<div class="test">
     <i onclick="myFunction(this)" class="fa fa-bars"></i>    
</div>

        <script>
        function myFunction(x) {
                x.classList.toggle("fa-times");
                x.classList.toggle("fa-bars");
                console.log(x.classList)
            }
        </script>
</body>

＆＃13;

classList.toggle仅部分工作

2 个答案: