html导航栏自动显示更多的,如何实现导航菜单的显示与隐藏
发布日期:2021-06-24 13:23:04 浏览次数:2 分类:技术文章

本文共 685 字,大约阅读时间需要 2 分钟。

8f32b6fa41577e132700f885adb2bbd3.png

小羊杨

用无序列表或者有序列表进行嵌套然后配套一下css就可以实现。下面是一个简单实现的代码,没有严谨的考虑兼容性,大概看一下把。望采纳html>

demo

ul>li>ul{

display:none;

}

ul>li>ul.on{

display:block;

}

window.οnlοad=function(){

var menu=document.getElementById("menu");

var cls=menu.getElementsByClassName("first");

menu.οnclick=function(e){

var e=e||window.event;

var target=e.target||e.srcElement;

if(target.className=="first"){

if(target.children[0].className=="on"){

target.children[0].className="";

}else{

for(var i=0;i

cls[i].children[0].className="";

}

target.children[0].className="on";

}

}

}

}

  • 一级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
  • 一级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
  • 一级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
  • 一级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
  • 一级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单
    • 二级菜单

转载地址:https://blog.csdn.net/weixin_33102135/article/details/117721765 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:html 随机 小游戏代码,html小游戏代码#(精选.)(3页)-原创力文档
下一篇:android textview背景透明度,Android TextView文字透明度和背景透明度设置

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年04月19日 00时28分10秒