jquery - 创建一个可折叠/可扩展的 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：当我单击第一个父级时，所有树都会展开，而不仅仅是 parent2；2：我可以隐藏 ul 使用 cssdisplay: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 浏览器都支持这些元素，对于 legacy 可以使用 polyfill。例如https://github.com/javan/details-element-polyfill

Answer 2

刚刚为此类任务创建了一个嵌入了 CSS 和 JS 的 HTML。 GitHub repo，该链接将保持有效，因为我没有计划删除它。