jquery无限层级下拉菜单实现代码

发布时间:2019-10-28编辑:脚本学堂
本文介绍下jquery实现无限层级下拉菜单的方法,一个jquery级联下拉菜单的实例代码,有需要的朋友参考下。

1,html部分
 

复制代码 代码示例:
<ul id="daohang">
 <li>
     <a href="${base}/">首页</a>
 <ul>
     <li>
  <a href="#">下拉一</a>
  <ul class="aaa">
      <li>
  <a href="#">下拉二</a>
  <ul class="aaa">
      <li><a href="#">下拉二</a></li>
      <li><a href="#">下拉二</a></li>
      <li><a href="#">下拉二</a></li>
  </ul>
      </li>
      <li><a href="#">下拉二</a></li>
      <li><a href="#">下拉二</a></li>
  </ul>
     </li>
     <li><a href="#">下拉二</a></li>
     <li><a href="#">下拉三</a></li>
 </ul>
 </li>
</ul>

2,css代码部分
 

复制代码 代码示例:
#daohang li ul li{position:relative;}
#daohang li ul{display:none;}
#daohang li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
#daohang li ul li .aaa li{float:none;}

3.js(基于jquery)代码部分,级联下拉菜单效果。
 

复制代码 代码示例:
$(document).ready(function(){
 $("#daohang li").hover(function(){
    $(this).find("ul:first").slideDown(200);//鼠标滑过查找li下面的第一个ul然后显示;
},function(){
    $(this).find("ul:first").slideUp(200);//鼠标离开隐藏li下面d的ul;
});