如何使用纯CSS技术实现一个可折叠树形菜单

html-css021

如何使用纯CSS技术实现一个可折叠树形菜单,第1张

利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

一：页面结构：

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

五：给二级菜单绑定事件，点击时加入选中的深色背景

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流

<style>

/*样式自己补一下*/

    .parent .son{display: none}

</style>

<ul class="parent">

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

<li class="pli">

<span>php</span>

<ul class="son">

<li>php1</li>

<li>php1</li>

</ul>

</li>

</ul> var pli = document.querySelectorAll(".parent .pli span")

for(var i = 0i<pli.lengthi++){

pli[i].index = i

pli[i].onclick = function(){

for(var j = 0j<pli.lengthj++){

document.querySelectorAll(".parent .pli .son")[j].style.display="none"

}

this.parentNode.querySelector(".son").style.display="block"

}

}