Je travaille sur le menu de mon site Web, que vous pouvez ouvrir en cliquant sur le bouton Menu Hamburger ( .Menu-bouton code>). Lorsque vous avez cliqué, il s'ouvre le DIV #menu code> (ce div couvre l'ensemble de la fenêtre) en exécutant le script suivant: <script>
$('.menu-button').on('click', function() {
if ($('#menu').css('display') == 'none') {
$('#menu').css('display', 'block');
} else {
$('#menu').css('display', 'none');
}
});
</script>
3 Réponses :
On cliquez sur l'événement Vous pouvez basculer une classe sur l'élément de menu qui déclenche une transition CSS code> transition #menu {
opacity: 0;
transition: opacity 1s 0s;
}
#menu.visible {
opacity: 1;
}
Est-il mieux à terme d'optimisation pour cibler un élément avec natif getElementyid qu'un sélecteur de requête JQuery CSS?
Chaque appel à une méthode de jQuery qui renvoie une collection de nœuds est en réalité une enveloppe à une méthode native, donc en général, chaque appel à JQuery sera plus lent que d'appeler la méthode native. Ceci est également vrai pour click () / On (ON () vs. code> addEventListener ()
Vous pouvez réaliser ce dont vous avez besoin et simplifie la logique en utilisant p> FadeToggle () Code> à la place:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu-button">Toggle menu...</button>
<div id="menu"></div>
Vous pouvez utiliser Animate et le rappel sur p> Affichage: masquer code> Après l'animation
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menu-button'>
</div>
<div id='menu' style='display:none'>
dzq
</div>