Tutoriel sur la création d'un répertoire arborescent avec CSS_CSS/HTML

Cet article présente en détail comment utiliser CSS pour contrôler facilement les attributs « afficher » et « masquer » des objets et créer un répertoire arborescent. Utilisez CSS pour créer un tel répertoire arborescent. Le code est relativement simple. Il y en a peu, alors je l'ai écrit et je l'ai partagé avec les internautes afin qu'ils puissent en créer un en cas de besoin.

La plupart des magazines électroniques Suoyi utilisent des répertoires arborescents. Lorsque la souris clique sur le répertoire principal, les sous-répertoires sont développés ; lorsque vous cliquez à nouveau sur le répertoire principal, les sous-répertoires sont fermés. Cela semble simple, vivant et sans prétention.

Il existe de nombreuses façons de créer ce genre de répertoire arborescent. Récemment, j'ai d'abord regardé l'exemple suivant : lorsque vous cliquez sur le répertoire principal avec la souris, le sous-répertoire correspondant sera déroulé, et lorsque vous cliquez à nouveau, il reviendra à son état d'origine, l'effet est exactement le même que l'effet catalogue dans le magazine électronique Soyi.

Méthode de production :
Je copie d'abord le code qui produit cet effet comme suit, puis je combine le code pour expliquer la méthode de production :
〈div id="main1" style= "color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ Répertoire principal 1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- Sous-répertoire 1〈/a〉 〈br〉
〈 a href="#"〉- Sous-répertoire 2〈/a〉 〈br〉
〈a href="#"〉- Sous-répertoire 3〈/a〉 〈br〉
〈a href="# " 〉- Sous-répertoire 4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all .child2.style.display ==''none'')?'''':''none''" 〉
+ Répertoire principal 2 〈/div〉
〈div id="child2" style= "display:none"〉
〈a href="#"〉- Sous-répertoire 1〈/a〉 〈br〉
〈a href="#"〉- Sous-répertoire 2〈/a〉 〈br〉
〈a href="#"〉- Sous-répertoire 3〈/a〉
〈/div〉
Remarque : " " représente un espace de caractères
1. Définissez d'abord deux DIV, un avec Pour le répertoire principal , nommez-le : main1 ; pour l'autre pour le sous-répertoire correspondant, nommez-le : child1. 2. Écrivez "+ Main Directory 1" dans le DIV de main1 et chargez un événement de clic de souris dessus : onclick et un petit programme Javascript : document.all.child1.style.display= (document.all. child1.style. display ==''aucun'')?'''':''aucun''. La fonction de ce programme est que lorsque la souris clique sur le DIV de main1 (c'est-à-dire sur "+ Répertoire principal 1"), si le DIV de child1 est masqué, qu'il soit affiché s'il est affiché, qu'il soit ; caché. .
3. Écrivez un sous-répertoire sur le DIV de child1 et définissez-le comme lien hypertexte. Dans l'exemple ci-dessus, j'ai défini un lien vide dans la production réelle, je l'ai remplacé par un lien réel afin qu'il pointe vers le lien. Cible. Ajoutez un CSS : style="display:none" à la définition DIV de child1. Le but est de masquer le sous-répertoire au début.
Pour créer d'autres répertoires, répétez simplement les trois étapes ci-dessus. Appuyez sur F12 pour voir l'effet. Cette méthode utilise principalement l'attribut display du CSS : display. Une de ses caractéristiques est que lorsque l'objet est masqué, l'espace de page occupé par l'objet sera automatiquement cédé. Nous savons que CSS a un autre attribut : la visibilité a également pour fonction d'afficher et de masquer les objets, mais elle ne peut pas être utilisée pour créer le répertoire arborescent ci-dessus. Parce qu'une fois que Visibility a masqué l'objet, l'espace occupé par l'objet n'est pas libéré. ​​Autrement dit, lorsque le sous-répertoire est masqué, l'emplacement du sous-répertoire est simplement vide et la position n'est pas libérée, donc un autre répertoire principal ne peut pas être rapproché. Il ne peut donc être utilisé que lorsque la position des éléments de la page doit être corrigée.