Comment Faire s'Effondrer des Listes Sans Java

Comment Faire s'Effondrer des Listes Sans Java

Creer un effondrement de la liste en utilisant uniquement du code CSS sans avoir besoin de Java ou JavaScript dans votre fichier source. En utilisant l'exemple de code ci-dessous, vous pouvez obtenir une liste qui s'effondre ou se dilate a chaque fois que vous cliquez sur le lien correspondant. Lorsque vous cliquez sur "Effondrement" de la liste des effondrements de vue et lorsque le "Elargir" le lien est clique, puis la liste s'affiche sur l'ecran.

• Ouvrez un editeur de texte sur votre ordinateur et creer un nouveau document vierge.
• Tapez le code suivant en haut du document:
• Inserez le code suivant au-dessous de la '' de la balise: .ligne { vertical-align: top height:auto !important } .liste {display:none } .montrer {display: none } .masquer:la cible .montrer {display: inline } .masquer:target {display: none } .masquer:la cible ' .liste {display:inline } @media print { .cacher, .montrer { display: none } }
• Inserez le code suivant au-dessous de la '' de la balise, qui contient le contenu de la liste et appelle le CSS style defini precedemment: Expand Collapse
  • Item 1
  • Item 2
  • Item 3
  
  
  
• Fermer le document HTML avec le bon par la saisie au fond:
• Enregistrez le fichier HTML dans votre editeur de texte. Le fichier doit etre enregistre avec le 'HTML' ou 'HTM' extension de fichier, de sorte qu'il s'affiche correctement dans un navigateur Web.
• Ouvrez le fichier enregistre dans votre navigateur et tester le pliable de la fonctionnalite de la liste.