3
votes

Ajout d'une deuxième fonctionnalité à un seul bouton

J'ai un bouton que je souhaite basculer entre deux «fonctionnalités». Je veux qu'il permette d'ouvrir et de fermer mon menu

Je veux ajouter onclick = "openNav ()" au premier clic, puis onclick = "closeNav ()" le deuxième html

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

Je ne suis pas sûr de la meilleure façon de faire cela, la morue fonctionne si elles sont sur deux boutons séparés.

EDIT: Je suis en utilisant Wordpress pour que tout le javascript soit dans un fichier .js séparé introduit

javascript string html css function

3 commentaires

Vous voulez dire basculer?

cela peut être fait en basculant b / t deux classes en utilisant jquery

oui, j'imagine que j'aurais dû utiliser cette terminologie un peu plus clairement

5 Réponses :

1
votes

Vous pouvez créer une fonction toggleNav qui alternera entre l'exécution de vos fonctions openNav et closeNav en utilisant un booléen comme ceci:

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

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");
}

2 commentaires

Devrait-il être enveloppé dans un $ (document) .ready ou similaire, car il sera introduit via un fichier .js séparé (Wordpress)

@ user3550879 non cela n'a pas besoin d'être enveloppé dans un $ (document) .ready () car vous utilisez des boutons pour activer vos fonctions. Comme rien dans votre javascript ne fait référence au HTML lors de son premier chargement , vous n'avez pas à vous soucier de $ (document) .ready :)

1
votes

Vous auriez généralement quelque chose comme:

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

Et le JS:

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

0 commentaires

2
votes

Vous pouvez modifier onclick de l'élément à la fin des deux fonctions.

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

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

0 commentaires

1
votes

Ajoutez simplement une ligne à chacune de vos fonctions:

Dans openNav():

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

Dans closeNav () :

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

0 commentaires

1
votes

Vous pouvez peut-être appeler les fonctions en fonction d'une valeur d'indicateur:

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

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');
}

0 commentaires