单击更改切换按钮？

Question

汉堡菜单图标打开和关闭隐藏的侧边栏，同时我希望侧边栏打开时图标变为 X。

按钮

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> </span>

菜单脚本

<script>
function toggleNav() {
    var sidenav = document.getElementById("mySidenav"),
    main = document.getElementById("main");
    sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
    wrapper.style.marginLeft = wrapper.style.marginLeft === "250px" ? 'auto' :  '250px';
}
</script>

<script>
function myFunction(x) {
  x.classList.toggle("fas fa-times");
}
</script>

可能犯了一个明显的错误，但我已经用谷歌搜索了很多次，但仍然无法弄清楚。

Answer 1

您不能像以前那样切换多个类

你必须打两个电话

function toggleNav() {
  /*    var sidenav = document.getElementById("mySidenav"),
      main = document.getElementById("main");
      sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
      wrapper.style.marginLeft = wrapper.style.marginLeft === "250px" ? 'auto' :  '250px';*/
}

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

i {
  height: 20px;
  width: 20px;
  background-color: red;
  display: block;
}

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> The red square represent your icon</span>

单击更改切换按钮？

Change toggle button on click?

html

css

button

toggle