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折叠菜单
URL地址：https://www.cdcxhl.com/article36/dsihcsg.html

成都网站建设公司_创新互联，为您提供品牌网站设计、云服务器、静态网站、网页设计公司、Google、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联