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：我可以使用css display:none隐藏该ul并使用:focus事件返回但是如何折叠该树。

FIDDLE

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

Answer 2

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

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

2 个答案: