创建一个可折叠/可扩展的 CSS 2 树

Question

我想创建一个仅基于 html 和 css 的 ul li 树菜单，也许是一个小的 jQuery。

所以这是我的 html：

<div class="wfm">
        <ul class="firstUl">
            <li>
            <span>Parent1</span>
                <ul>
                    <li>
                            <span>Parent2</span>
                        <ul>
                            <li>
                                <span>Parent3</span>
                                <ul>
                                    <li>
                                       <span>Parent4</span>
                                        <ul>
                                            <li>
                                                <span>Child4</span>
                                            </li>
                                            <li>
                                                <span>Child4</span>
                                            </li>
                                            <li>
                                               <span>Child4</span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                       <span>Parent4</span>
                                    </li>
                                    <li>
                                        <span>Parent4</span>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                  </ul>
            </li>
      </ul>
    </div>

这是显示 ul 内容的 css 技巧：

 .subParent,.subParent1,.subParent2,.subParent3{
    display: none;
}

li:focus .subParent,li:focus .subParent1,li:focus .subParent2,li:focus .subParent3{
    display: block;
}

我的问题： 1：当我点击第一个父级时，所有树都会展开，而不仅仅是父级 2；2：我可以使用 css 隐藏 uldisplay:none并带回:focus事件，但如何折叠那棵树。

小提琴

Answer 1

那么，为什么不利用 HTML5.1 的详细信息/摘要元素呢？它不需要 JavaScript 并且可以通过 CSS 进行定制。这里有一个例子

<details class="tree-nav__item is-expandable">
    <summary class="tree-nav__item-title">The Realm of the Elderlings</summary>
    <details class="tree-nav__item is-expandable">    
      <summary class="tree-nav__item-title">The Six Duchies</summary>
         <a class="tree-nav__item-title"><i class="icon ion-ios-bookmarks"></i> Assassin’s Apprentice</a>
    </details>
</details>

https://codepen.io/dsheiko/pen/MvEpXm/

Evergreen 浏览器都支持这些元素，对于旧版可以使用 polyfill。例如https://github.com/javan/details-element-polyfill