Добавление второй функциональности к одной кнопке

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

Возможно, вы можете вызывать функции на основе некоторого значения флага:

var flag = true;
var navBtn = document.querySelector('#nav-icon');
navBtn.addEventListener('click', function(btn){
  if(flag) openNav();
  else closeNav();
  flag = !flag;
});

function openNav(){
  console.log('Open');
}

function closeNav(){
  console.log('Close');
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button">Click</button>

Answer 2

Просто добавьте строку для каждой из ваших функций:

В openNav():

document.getElementById("nav-icon").setAttribute("onclick", "closeNav()");

В closeNav():

document.getElementById("nav-icon").setAttribute("onclick", "openNav()");

Answer 3

У вас обычно есть что-то вроде:

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

И JS:

var navOpen = false;
function toggleNav(){ 
   navOpen = !navOpen
   // Do conditional show hide here based on navOpen
}

Answer 4

Вы можете изменить 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>

Answer 5

Вы можете создать функцию toggleNav, которая будет альтернативно выполнять обе ваши функции openNav и closeNav, используя логическое значение, например:

let opened = false; // set the nav as closed by default
function toggleNav() {
  if(!opened) { // if opened is false (ie nav is closed), open the nav
    openNav()
  } else { // else, if opened is ture (ie nav is open), close the nav
    closeNav();
  }
  opened = !opened; // negate boolean to get opposite (t to f, and f to t)
}

function openNav() {
  console.log("Opened Nav");
}

function closeNav() {
  console.log("Closed Nav");
}

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