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

#javascript #html #css #string #function

#javascript #HTML #css #функция

Вопрос:

У меня есть кнопка, с помощью которой я хочу переключаться между двумя «функциональностями». Я хочу, чтобы она открывала и закрывала мое меню

Я хочу добавить onclick="openNav()" при первом нажатии, а затем onclick="closeNav()" при втором html

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

Я не уверен, что это лучший способ сделать это, код работает, если они находятся на двух отдельных кнопках.

РЕДАКТИРОВАТЬ: я использую WordPress, поэтому весь javascript находится в отдельном .js файле, введенном

1. Вы имеете в виду переключение?

2. это может быть сделано путем переключения между двумя классами с помощью jquery

3. да, я думаю, мне следовало использовать эту терминологию немного более четко

Ответ №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>

Ответ №2:

Вы могли бы создать 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>

1. Должно ли это быть обернуто в $(document). готово или что-то подобное, поскольку оно будет введено через отдельный файл .js (WordPress)

2. @user3550879 нет, это не обязательно оборачивать в $(document).ready() , поскольку вы используете кнопки для активации своих функций. Поскольку ничто в вашем javascript не ссылается на HTML при его первой загрузке , вам не нужно беспокоиться о $(document).ready 🙂

Ответ №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
}

Ответ №4:

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

В openNav() :

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

В closeNav() :

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

Ответ №5:

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

 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>