时间戳

首页 > 解决方案 > 单击时更改切换按钮？

html - 单击时更改切换按钮？

问题描述

汉堡菜单图标打开和关闭隐藏的侧边栏，同时我希望在侧边栏打开时图标变为 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>

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

标签： htmlcssbuttontoggle

解决方案

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

你必须打两个电话

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>

推荐阅读