css折叠菜单样式,html折叠菜单

用JS+CSS实现折叠式导航菜单，当点击第一菜单后，自动打开第二次菜单，如下图：

style

成都创新互联公司是一家专业的成都网站建设公司，我们专注成都网站设计、网站建设、网络营销、企业网站建设，买链接，1元广告为企业客户提供一站式建站解决方案，能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高，创新互联力求做到尽善尽美。

/*样式自己补一下*/

.parent .son{display: none;}

/style

ul class="parent"

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

li class="pli"

spanphp/span

ul class="son"

liphp1/li

liphp1/li

/ul

/li

/ul

var pli = document.querySelectorAll(".parent .pli span");

for(var i = 0;ipli.length;i++){

pli[i].index = i;

pli[i].onclick = function(){

for(var j = 0;jpli.length;j++){

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

}

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

}

}

css四层向下折叠菜单

道理和二级菜单是一样的，就是嵌套的层级多了要注意样式的书写！

你实在用css写不出来，也可以用jq插件来写

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

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

网站栏目：css折叠菜单样式,html折叠菜单
地址分享：http://bjjierui.cn/article/dsihcsg.html