javascript - classList.toggle 仅部分有效

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>