jQuery实现简单二级下拉菜单

前端之家收集整理的这篇文章主要介绍了jQuery实现简单二级下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML代码

js代码

菜单 $(document).ready(function(){ var objStr = ".UpLayer"; $(objStr).each(function(i){ $(this).click(function(){ $($(objStr+" dd")[i]).show(); $($(objStr+" dt")[i]).addClass("UpLayer02"); }); $(this).hover(function(){},function(){ $($(objStr+" dd")[i]).hide(); $($(objStr+" dt")[i]).removeClass("UpLayer02"); }); }); });

css代码

Box{margin:0 auto;text-align:left;width:920px;} .clear{clear:both;} /* 【经典】弹出层菜单 */ .UpLayer{ margin:100px;} .UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} .UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} .UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} .UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;}

最好不要忘记插入jQuery js文件,最好下载最新的。

以上所述就是本文的全部内容了,希望大家能够喜欢。

原文链接:https://www.f2er.com/jquery/54845.html

猜你在找的jQuery相关文章