Menu à bascule ajouter un espacement (marge) si vous cliquez sur

Vous avez une idée de la raison pour laquelle mon code ne fonctionnera pas comme souhaité? Si je clique dessus les deux premières fois que le navi mobile est basculé cela fonctionne bien mais la troisième fois il n'ajoute pas la marge comme je veux.Menu à bascule ajouter un espacement (marge) si vous cliquez sur

jQuery(document).ready(function($){ 
    $("#site-navigation.main-navigation").click(function(){ 
    $("#page").css("margin-top", "285px"); 
    }); 

    $("#site-navigation.main-navigation.toggled").click(function(){ 
    $("#page").css("margin-top", "0px"); 
    }); 
});

Source

2017-10-12 altos

1) Vous devez inclure le code HTML pour quiconque d'être en mesure de débogage. 2) Votre extrait de code n'est pas correctement formaté pour StackOverflow - vous devez ajouter séparément le Javascript et le HTML dans différentes parties de l'éditeur d'extraits afin qu'ils puissent être exécutés automatiquement. –

En outre, vous ne fermez pas la première fonction de clic correctement ... – Gabplay

Je sens que cette logique en tant que telle, va avoir un problème car elle définit des liaisons sur les éléments en fonction de leur état initial lors du chargement de la page. Ajouter/supprimer la classe 'toggled' de l'élément de navigation principal ne l'amènera pas à utiliser l'autre liaison. Il n'utilisera jamais que les liaisons qui y sont placées. Cette courte apparition de liaisons directes peut être surmontée en utilisant une liaison de délégué. – Taplar

Vos deux événements tirent en même temps quand #site-navigation.main-navigation a la classe « .toggle ». Ce n'est pas ce que vous vouliez. Ce code fera ce que vous voulez.

jQuery(document).ready(function($){ 
    $("#site-navigation.main-navigation").click(function(){ 
     if ($(this).hasClass('toggled')) { 
      $("#page").css("margin-top", "0px"); 
     } else { 
      $("#page").css("margin-top", "285px"); 
     } 
    }); 
});

Source

2017-10-12 20:53:53

Dans ce cas ce n'est pas grave, l'ordre des écouteurs d'événements le fait fonctionner comme il se doit, il doit y avoir un autre problème, peut-être avec html on pourrait en dire plus – Joint

Bascule une classe CSS.

document.getElementById("foo").addEventListener("click", function(e) { 
 
    this.classList.toggle("bump-it"); 
 
});

.bump-it{ 
 
    margin-left:24px; 
 
}

<button id="foo"> 
 
click me 
 
</button>

Source

2017-10-12 22:19:22

Menu à bascule ajouter un espacement (marge) si vous cliquez sur

Répondre

Questions connexes