jquery简单的多级下拉菜单

引入js文件:

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

CSS部分:
 <style type="text/css">
.c1{
     float:left;
     border:1px solid red;
     width:100px;
     height:10px;
    }
#div1{
  top:10px;
  left:10px;
  position:absolute;
  width:500px;
  height:10px;
}
#div11{
  top:21px;
  left:40px;
  position:absolute;
  width:100px;
  background:pink;
  display:none;
}
#div21{
  top:21px;
  left:140px;
  position:absolute;
  width:100px;
  background:pink;
  display:none;
}
#div111{
  top:21px;
  left:100px;
  position:absolute;
  width:100px;
  background:yellow;
  display:none;
}
#div211{
  top:21px;
  left:100px;
  position:absolute;
  width:100px;
  background:yellow;
  display:none;
}
#div112{
  top:41px;
  left:100px;
  position:absolute;
  width:100px;
  background:yellow;
  display:none;
}
#div222{
  top:41px;
  left:100px;
  position:absolute;
  width:100px;
  background:yellow;
  display:none;
}
   </style>

主体部分:

 <body>
   <div id="div1">
  <ul>
    <li class="c1">菜单1</li>
     <div id="div11" class="item">
     <ul>
     <li  class="c11">我是菜单11>></li>
      <div id="div111" class="item2">
      <ul>
      <li >我是菜单111</li>
      <li >我是菜单112</li>
      <li >我是菜单113</li>
      </ul>
      </div> 
     <li  class="c11">我是菜单12>></li>
      <div id="div112" class="item2">
      <ul>
      <li >我是菜单121</li>
      <li >我是菜单122</li>
      <li >我是菜单123</li>
      </ul>
      </div> 
     <li>我是菜单13>></li>
     </ul>
    </div>
    <li class="c1">菜单2</li>
     <div id="div21" class="item">
     <ul>
     <li  class="c11">我是菜单21>></li>
      <div id="div211" class="item2">
      <ul>
      <li >我是菜单211</li>
      <li >我是菜单212</li>
      <li >我是菜单213</li>
      </ul>
      </div> 
     <li  class="c11">我是菜单22>></li>
      <div id="div222" class="item2">
      <ul>
      <li >我是菜单221</li>
      <li >我是菜单222</li>
      <li >我是菜单223</li>
      </ul>
      </div> 
     <li>我是菜单23>></li>
     </ul>
    </div>
    <li class="c1">菜单3</li>
   </ul>
 </div>
  </body>

jquery 操作部分:

 <script type="text/javascript">
  $(".c1").mousemove(function(){
   $(".item").hide();//先将所有第一层子菜单隐藏
 $(".item",this).show();//将选中的当前菜单下的第一层子菜单显示
  });
  $(".c11").mousemove(function(){
   $(".item2").hide();//将所有第二层子菜单隐藏
 $(".item2",this).show();//将选中的当前第一层子菜单下的第二层子菜单显示
  });
  $("#div1,.item,.item2").mouseleave(function(){//并集,即离开这三个区域(所有菜单区域)时进行操作
 //隐藏所有第二层子菜单再隐藏所有第一层子菜单
 //必须注意顺序,否则鼠标重新放到总菜单时,两级子菜单div区域都将显示
 $(".item2").hide();
 $(".item").hide();
  });
  </script>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值