Ce didacticiel détaille comment utiliser jQuery et JavaScript pour réaliser une interaction interne courante: lors du clic sur le bouton du menu Hamburger, changez l'écran et l'état caché de son menu déroulant associé. Avec une structure HTML propre et quelques lignes de code jQuery, vous apprendrez à contrôler efficacement la visibilité des éléments de page, optimisant ainsi l'expérience utilisateur.

1. Comprendre les besoins interactifs

Dans la conception Web, le menu du hamburger est souvent utilisé dans les dispositions mobiles ou réactives pour économiser l'espace d'écran. Lorsque l'utilisateur clique sur l'icône du menu Hamburger, un menu déroulant de navigation sera généralement élargi; Lorsque vous cliquez à nouveau, le menu doit être rétracté. Ce type d'interaction "cliquez pour changer" est une compétence de base dans le développement frontal.

2. Préparation de la structure HTML de base

Pour obtenir l'interaction ci-dessus, nous avons besoin d'une structure HTML claire pour héberger le bouton du menu Hamburger et son menu déroulant correspondant. Voici un exemple structurel recommandé:

 <div class="dropdown">
  <button class="Hamburger-Btn"> Menu 
  <ul class="dropdown-menu">
    <li> Option 1 </li>
    <li> Option 2 </li>
    <li> Option 3 </li>
  </ul>
</button>
</div>

• Div.Dropdown: en tant que conteneur pour l'ensemble du composant déroulant.
• Button.hamburger-btn: déclenche le bouton pour afficher / masquer le menu déroulant.
• ul.dropdown-menu: le contenu réel du menu déroulant.

Remarque: Dans l'état initial, .Dropdown-menu est généralement défini pour masquer via CSS, comme l'affichage: aucun; Pour s'assurer que le menu est fermé lorsque la page est chargée.

3. Utilisez jQuery pour réaliser la fonction de clic-interruption

JQuery fournit une série de façons puissantes de simplifier les opérations DOM et le traitement des événements. Ici, nous utiliserons sa liaison d'événements et son sélecteur d'éléments pour implémenter la fonction de clic-to-interrupteur.

1. Présenter la bibliothèque jQuery

Assurez-vous que la bibliothèque JQuery a été introduite avant la fin de la balise ou de votre fichier HTML. Vous pouvez charger à partir d'un CDN, par exemple:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </ script></script>

2. Écrivez le code JavaScript / jQuery

La logique principale consiste à écouter les événements de clic du bouton Hamburger et de basculer la visibilité du menu déroulant lorsque l'événement est déclenché.

 $ (document) .ready (function () {
  // Lorsque le document est entièrement chargé et analysé, exécutez $ ('. Hamburger-btn'). Cliquez sur (fonction () {
    // lier l'événement de clic à tous les éléments avec le nom de la classe 'hamburger-btn' // 'ce' fait référence à l'élément '.hamburger-btn' élément //.
    $ (this) .sibllings ('. dropdown-menu'). toggle ();
  });
});

Explication du code:

• $ (document) .ready (function () {...});: Il s'agit d'un modèle idiomatique jQuery, garantissant que le DOM (modèle d'objet de document) est entièrement chargé et analysé avant d'exécuter du code interne, empêchant les tentatives de fonctionner sur l'élément lorsqu'il n'a pas existé.
• $ ('. hamburger-btn'). cliquez (function () {...});: Cette ligne de code sélectionne tous les éléments avec la classe hamburger-btn et lie un gestionnaire d'événements de clic. Lorsque l'un de ces éléments est cliqué, les fonctions entre parenthèses sont exécutées.
• $ (this): à l'intérieur de la fonction du gestionnaire d'événements, ce mot-clé fait référence à l'élément DOM qui déclenche l'événement actuel. $ (ceci) l'enveloppe en un objet jQuery afin que nous puissions utiliser les méthodes de JQuery.
• .Sifrants ('. Dropdown-menu'): Il s'agit d'une méthode jQuery très pratique. Il recherchera tous les éléments de frères et sœurs de l'objet jQuery actuel (c'est-à-dire le cliqueté .hamburger-btn) et filtrez les éléments avec la classe Dropdown-menu. Cela garantit que nous n'utilisons que les menus déroulants directement associés au bouton en cours de clic.
• .Toggle (): Il s'agit d'une méthode d'animation de jQuery pour changer la visibilité des éléments. Si l'élément est actuellement visible, il le cache; Si l'élément est actuellement masqué, il l'affiche. Par défaut, il utilise une animation en douceur dans le fondu / décolore.

4. Précautions et meilleures pratiques

1. CSS Statut initial: assurez-vous que votre feuille de style CSS définit la propriété d'affichage initiale de .dropdown-menu sur nulle, sinon le menu sera affiché par défaut.

    .dropdown-menu {
     Affichage: aucun; / * Hide initiale * /
     Style de liste: aucun;
     rembourrage: 0;
     marge: 0;
     Border: 1px solide #ccc;
     Color d'arrière-plan: # f9f9f9;
     Position: absolue; / * Si un effet flottant est requis * /
     Z-Index: 1000;
   }

2. Version JQuery: assurez-vous que la version jQuery que vous utilisez est compatible avec votre projet. Le code ci-dessus fonctionne bien dans les versions jQuery modernes.
3. Considérations de performances: pour les applications grandes ou complexes, vous pouvez envisager d'utiliser des délégués d'événements ($ (document) .on ('click', '.hamburger-btn', function () {...}); pour améliorer les performances, en particulier lors de l'ajout ou de la suppression des boutons dynamiquement.
4. Accessibilité: pour améliorer l'accessibilité, envisagez d'ajouter des attributs ARIA (tels que ARIA-Expanded) pour indiquer l'état élargi du menu et garantir que les utilisateurs de clavier peuvent activer le menu via la navigation des clés de l'onglet et entrer les touches.
5. Alternative: en plus de .toggle (), vous pouvez également utiliser .AddClass () et .RemoveClass () pour changer une classe CSS qui contrôle l'affichage / masquer (tel que .show ou .hide), ce qui offre une plus grande flexibilité dans le contrôle de style.

5. Résumé

Grâce à ce didacticiel, vous avez appris à utiliser jQuery pour implémenter simplement et efficacement l'affichage de clic-to-interrupteur et de masquer la fonction de la boîte déroulante du menu Hamburger. Le noyau consiste à identifier correctement les éléments HTML et à utiliser les méthodes de liaison des événements de JQuery et de fonctionnement DOM (telles que .siblings () et .toggle ()) pour contrôler la visibilité des éléments. La maîtrise de ce modèle d'interaction de base est essentielle pour créer des interfaces Web réactives et conviviales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!