javascript - 向单个按钮添加第二个功能

Question

我有一个按钮，我想在两个“功能”之间切换。我希望它能打开和关闭我的菜单

我想在第一次点击时添加 onclick="openNav()"，然后在第二次点击时添加 onclick="closeNav()" html

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>

我不确定执行此操作的最佳方法，如果它们位于两个单独的按钮上，则代码有效。

编辑:我正在使用 Wordpress，所以所有的 javascript 都在一个单独的 .js 文件中引入

Answer 1

您可以更改 onclick两个函数末尾的元素。

let btn = document.getElementById('nav-icon');
function openNav(){
  console.log('openNav called');
  btn.onclick = closeNav
}
function closeNav(){
  console.log('closeNav called');
  btn.onclick = openNav
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>