CSS pur pour implémenter la structure arborescente

Cette fois, je vais vous présenter du CSS pur pour implémenter une structure arborescente. Quelles sont les précautions pour implémenter du CSS pur pour implémenter une structure arborescente. Vous trouverez ci-dessous un cas pratique, jetons un coup d'œil.

Dans cet article, je vais vous présenter comment utiliser CSS et HTML pour afficher les nœuds d'une liste non ordonnée à plusieurs niveaux dans une arborescence. Nous utilisons des arborescences dans de nombreux projets, comme les organigrammes d'entreprises, les classifications infinies, etc.

Css pur pour implémenter la structure d'attributs

L'idée du CSS pour implémenter la structure d'attributs est d'utiliser des pseudo-classes pour implémenter des lignes de connexion de structure arborescente If. vous souhaitez implémenter l'expansion, la contraction et la sélection par clic. L'effet de cadre doit être obtenu avec js. En fait, l'expansion et la contraction sont un basculement entre le masquage et l'affichage des éléments enfants d'un élément cliqué.

Rendu

Structure HTML

    <ul class="domtree">
        <li>
            1级菜单
            <ul>
                <li>2级菜单</li>
                <li>
                    2级菜单
                    <ul>
                        <li>3级菜单</li>
                        <li>3级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            1级菜单
            <ul>
                <li>2级菜单</li>
                <li>2级菜单</li>
            </ul>
        </li>
    </ul>

css

        ul.domtree,
        ul.domtree ul {
            margin: 0;
            padding: 0 0 0 2em;
        }
        ul.domtree li {
            list-style: none;
            position: relative;
        }
        ul.domtree>li:first-child:before {
            border-style: none none solid none;
        }
        ul.domtree li:before {
            position: absolute;
            content: '';
            top: -0.01em;
            left: -0.7em;
            width: 0.5em;
            height: 0.615em;
            border-style: none none solid solid;
            border-width: 0.05em;
            border-color: #aaa;
        }
        ul.domtree li:not(:last-child):after {
            position: absolute;
            content: '';
            top: 0.7em;
            left: -0.7em;
            bottom: 0;
            border-style: none none none solid;
            border-width: 0.05em;
            border-color: #aaa;
        }

Je crois que vous lirez le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser le HTML et le CSS pour implémenter Cornell Notes

Dégradé du texte de la barre de progression CSS en fonction de la progression

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!