扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
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写不出来,也可以用jq插件来写
利用伪类可以实现点击打开折叠菜单,但是再次点击收起貌似就没法实现了。跟楼下说的一样,利用:hover、:active 可以设置二级菜单的样式(如height、visibility、display)以达到展开的效果。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流