Résumé des méthodes pour utiliser jQuery pour obtenir divers effets fonctionnels de menu déroulant

jQuery est une bibliothèque javascript très pratique à utiliser et très puissante. Normalement, seule la barre de menus est affichée dans la fenêtre, et lorsque le pointeur de la souris pointe sur la barre de menus, les sous-menus de la barre de menus s'affichent. Lorsque le pointeur de la souris quitte le menu, le sous-menu est masqué et revient à l'état où seule la barre de menu principale est affichée. Sur la base de cette fonctionnalité du menu déroulant, nous pouvons utiliser la technologie jQuery pour implémenter ces fonctions. Cet article expliquera en détail la technologie jQuery pour implémenter la fonction de menu déroulant.

1. Vous pouvez d'abord comprendre l'introduction du contenu pertinent dans "Tutoriel de mise en œuvre de divers menus déroulants"

Ce cours va du facile au difficile, étape par étape, de la mise en page Web statique à la mise en œuvre en utilisant différentes technologies telles que HTML/ Les menus déroulants dynamiques CSS, JavaScript et jQuery vous permettent de maîtriser la production de menus déroulants et de déboguer le code entre différents navigateurs pour résoudre les problèmes de compatibilité des navigateurs.

2. jQuery implémente les fonctions et les effets du menu déroulant

1 jquery sélectionne l'élément d'option de menu déroulant. pour déclencher un événement

Dans de nombreuses applications, la sélection d'une option déroulante de sélection déclenchera un événement et effectuera l'opération correspondante. Ce qui suit est un exemple de code pour présenter comment utiliser jquery pour implémenter cette fonction. Toutes les options autres que le premier élément sélectionné par le code peuvent écrire la valeur dans p.

2. Expérience de mise en œuvre du menu déroulant jquery

Première partie : Ajout d'un bouton de déclenchement pour le menu

Partie 2 : est lié à un gestionnaire d'événements de clic Une fois le bouton de déclenchement cliqué, il est transmis à la couche la plus externe de. le menu déroulant. li lie la fonction de traitement du survol, qui semble être un endroit intelligent. Liez la fonction de survol au li le plus externe. La fonction de traitement ici est de ne rien faire lorsque la souris survole le li (la première fonction est vide. Lorsque la souris part, le li est fermé). De cette façon, le menu qui développera ul plus tard sera à l'intérieur du li le plus à l'extérieur, donc le menu ne sera pas automatiquement fermé, ce qui signifie que lorsque la souris quittera tout le menu, le li sera automatiquement fermé.

Partie 3 : Liez une fonction à l'événement de survol de l'ul imbriqué sous le menu pour développer et réduire le menu du niveau suivant. Dans le même temps, une fonction de traitement de réduction est également liée au menu de niveau suivant, qui fonctionne avec la fonction de réduction liée au li le plus externe par clic dans le menu de déclenchement. Il s'agit de la fonction de réduction automatique du menu.

3. Un menu déroulant jQuery avec du code simple

Un menu déroulant jQuery simple avec très peu de code, très adapté aux débutants avec des bases connaissances pour apprendre et s’améliorer. L'implémentation est également très simple, principalement via du code jQuery. Lorsque le pointeur de la souris pointe sur la barre de menu, le sous-menu de la barre de menu s'affiche. Lorsque le pointeur de la souris quitte le menu, le sous-menu est masqué et revient à l'état où seule la barre de menu principale est affichée.

4. Effet de menu déroulant de navigation implémenté par jQuery

Effet de navigation (compatible avec IE6)

1) Utilisez la fonction $("#navigation ul li:has(ul)") pour sélectionner les éléments

contenant des éléments

, puis leur ajouter des événements de survol,

2) Dans l'événement de survol Dans la première fonction, utilisez $(this).children("ul") pour rechercher l'élément

à l'intérieur de l'élément
• , puis utilisez l'instruction stop(true,true) pour développer la navigation vers le bas

  3) Dans la deuxième fonction de l'événement de survol, utilisez l'instruction stop(true,true).slideUp("fast") pour masquer la navigation vers le haut

  4) Ajouté avant la méthode stop(true,true) des deux effets d'animation, l'avantage est qu'elle peut effacer la file d'attente d'animation qui a été exécutée et passer à l'état final de l'animation en cours d'exécution

  5. JQuery implémente un menu déroulant simple

  JQuery en tant que framework DOM léger nous apporte beaucoup de commodités. Tout d'abord, nous référençons la bibliothèque de scripts de Google ; puis nous écrivons un morceau de HTML puis définissons du CSS pour cela hover(over,out )Une méthode qui simule les événements de survol (la souris se déplace sur et hors d'un objet). Il s'agit d'une méthode personnalisée qui fournit un état « conserver » pour les tâches fréquemment utilisées.

  Questions et réponses sur jQuery implémentant la fonction de menu déroulant

  1

  Événement de clic dans le menu déroulant.

  2.

  Problème avec le menu déroulant secondaire jquery

  3

  Le menu déroulant ne peut pas être utilisé normalement après l'ajustement. la largeur du div

  [Recommandations associées]
  1

  html+css Résumé de la création de différents styles de menus déroulants<.>2.

  Téléchargement gratuit des effets de navigation du site Web chinois PHP

  3

  Un résumé de l'utilisation de JavaScript pour implémenter les fonctions de menu déroulant

  .

  
  

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!