Qu'est-ce qu'un arbre dans la conception Web? En termes simples, cliquez sur un lien, développez le répertoire inférieur, puis cliquez dessus pour rejoindre. C'est l'arbre le plus simple. Comment l'implémenter? C'est aussi très simple. Il y a un écran de propriété dans CSS. Cela peut contrôler la réalité du contenu, mais il ne s'affiche toujours pas. Ensuite, vous pouvez contrôler les propriétés de CSS via JS., Voir le code suivant:
<div> Top Directory </div>
<div id = Menulist>
<div> Menu 1 </div>
<div> Menu 2 </div>
<div> Menu 3 </div>
</div>
Ceci est considéré comme un prototype de l'arbre. Bien sûr, l'état initial ajoute l'attribut d'affichage de CSS. Les attributs d'affichage les plus couramment utilisés sont aucun et les attributs de blocs.
Aucun n'est affiché, tandis que le bloc est affiché comme un élément de type de bloc. Puis regardez le code
<div> Top Directory </div>
<div id = Menulist Style = Affichage: Aucun>
<div> Menu 1 </div>
<div> Menu 2 </div>
<div> Menu 3 </div>
</div>
De cette façon, si vous exécutez la page, vous afficherez uniquement le répertoire de niveau supérieur. Si vous le contrôlez, vous devez ajouter du code JS.
1. Obtenez d'abord le mésuliste
var Menulist = document.getElementById (Menulist);
2. Ou vous pouvez contrôler ses propriétés CSS après cet objet
MENULIST.STYLE.DISPlay = Block;
Ajouter un jugement
if (menulist.style.display = aucun)
MENULIST.STYLE.DISPlay = Block;
autre
Menulist.style.display = aucun;
De cette façon, l'arbre le plus original est généré, le code final
<cript>
fonction showmenu ()
{
var Menulist = document.getElementById (Menulist);
if (Menulist.style.display == Aucun)
MENULIST.STYLE.DISPlay = Block;
autre
Menulist.style.display = aucun;
}
</cript>
<div sur
click = showmenu ();> répertoire supérieur </div>
<div id = Menulist Style = Affichage: Aucun>
<div> Menu 1 </div>
<div> Menu 2 </div>
<div> Menu 3 </div>
</div>
Pendant longtemps, je faisais des répertoires d'attribut selon cette méthode. Peu importe la complexité du répertoire à faire, cette méthode a été jugée et testée. La capture d'écran suivante est l'effet de fonctionnement d'un répertoire d'arbre relativement complexe que j'ai fait sous IE:
La terrible chose s'est produite sous Chrome et c'était complètement foiré. Après une récupération d'informations, j'ai finalement trouvé la raison. En plus du bloc et aucun, l'affichage a de nombreux autres attributs. Le bloc est affiché en blocs. J'étais disposé dessus dans une table. Dieu sait si la table et le bloc ont une profonde haine. Microsoft pensait que cela ignorait intelligemment leur haine, tandis que Chrome obéissait toujours aux normes très honnêtement. Firefox est le même, il y a donc encore des problèmes dans leurs explications. Comment résoudre ce problème:
L'affichage a également une cellule de table de propriété, ce qui signifie rendu le contenu sous la forme d'une table. Ceci est exactement conforme à mon utilisation d'une table pour la mise en page. Ce qui suit est un rendu compatible de trois navigateurs:
IE6
chrome2
Firefox3.5