创建可折叠/可展开的CSS 2树
创建可折叠/可展开的CSS 2树
提问于 2013-08-14 21:34:07
我想创建一个ul li树形菜单只基于html和css，可能是一个小的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:当我单击first parent时，所有的树都会展开，而不仅仅是parent2；2:我可以用css display:none隐藏ul，用:focus事件带回来，但是我怎么才能折叠那个树呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-16 17:01:28
那么，为什么不利用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/
长青浏览器都支持这些元素，对于传统的可以使用polyfill。例如https://github.com/javan/details-element-polyfill
Stack Overflow用户
发布于 2018-07-11 06:33:36
我刚刚为这类任务创建了一个嵌入CSS和JS的HTML。GitHub repo，链接将保持有效，因为我没有删除它的计划。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18233232
复制相关文章
相似问题