Table des matières:
Vidéo: Tutoriel jQuery : Menu Accordéon 2025
Vous utilisez l'accordéon dans CSS3 pour masquer tout élément de la page. Lorsqu'un utilisateur sélectionne une catégorie, les éléments de cette catégorie deviennent visibles et les éléments de toutes les autres catégories sont masqués. L'effet est de concentrer l'attention de l'utilisateur et de rendre l'utilisateur plus efficace dans l'exécution de tâches spécifiques. Le code suivant est tout ce dont vous avez besoin pour rendre cette fonctionnalité utilisable.
$ (function () {$ ("# Configuration"). Accordéion ();});
Le code est concis, mais le secret dans ce cas est la façon dont vous créez les balises pour votre page. Notez que le widget Accordion masque les paramètres sur lesquels l'utilisateur ne se concentre pas. Lorsque l'utilisateur clique sur Couleur d'arrière-plan, les options Couleur de premier plan sont masquées. De même, en cliquant sur Options, les contrôles Options sont affichés.
Les contrôles dans chaque zone n'ont pas d'importance pour le widget Accordéon, mais le formatage HTML5 le fait. Ce formulaire comprend également un bouton de soumission. Si vous ne configurez pas correctement les contrôles, le bouton d'envoi devient une partie de l'effet d'accordéon, et cliquer dessus ne soumet plus le formulaire. Voici une vue condensée du HTML5 pour cet exemple:
Couleur de premier plan
Rouge… Plus d'entrées et d'étiquettes …
Couleur de fond
Rouge… Plus d'entrées et d'étiquettes …
Options
Utilisation Sons spéciauxUtiliser les effets spéciaux
Notez que vous devez placer les groupes de contrôle des en-têtes dans un espace séparé, puis l'étiqueter comme celui que vous voulez utiliser pour l'effet d'accordéon. Un séparé abrite les contrôles individuels pour un groupe spécifique. Le bouton de soumission fait partie du formulaire, mais il est en dehors de la configuration.
Lorsque vous cliquez sur le bouton Modifier la configuration, vous constatez que le formulaire fonctionne correctement - en examinant le contenu du champ d'adresse. En utilisant les valeurs par défaut, l'URL résultante contient Accordion. html? Premier plan = Rouge et Arrière-plan = Rouge lorsque vous cliquez sur Modifier la configuration.
