Jq写个联级菜单
这个效果很好看,Jq很容易实现:
$(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul').show(); $(this).focus().addClass('focusa') },function(){ $(this).children('ul').hide(); $(this).focus().removeClass('focusa') }); });
当 hover ,执行 函数 来show , 当移出 ,执行函数 来hide。 同时这里用到了链式操作
$('').hover(function(){},function(){});
附上html参考,我删减了部分<div class = "container" > <ul class = "menu" > <li><a href= "#" >菜单一</a> <ul class = "one" > <li><a href= "#" >菜单一</a></li> <li><a href= "#" >菜单二</a></li> <li><a href= "#" class = "more" >菜单五</a> <ul class = "two" > <li><a href= "#" >菜单一</a></li> <li><a href= "#" >菜单二</a></li> <li><a href= "#" class = "more" >菜单五</a> <ul class = "hdw" > <li><a href= "#" >菜单一</a></li> <li><a href= "#" >菜单二</a></li> <li><a href= "#" class = "more" >菜单五</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href= "#" >菜单二</a> <ul class = "one" > <li><a href= "#" >菜单一</a></li> <li><a href= "#" >菜单二</a></li> <li><a href= "#" class = "more" >菜单三</a> <ul class = "two" > <li><a href= "#" >菜单一</a></li> <li><a href= "#" >菜单二</a></li> </ul> </li> </ul> </li> <li><a href= "#" >菜单三</a></li> </ul> </div> |
难的是样式
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步