程序博客网 > 孤城网络

jquery简单的多级下拉菜单

来源：互联网发布：孤城网络编辑：程序博客网时间：2024/05/21 09:16

引入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>

孤城网络

孤城网络

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子三大类岩石岩石分类岩石圈什么岩石什么的岩石陈岩石汤华岩石 st岩石股票金岩石 st岩石股吧 st岩石岩石图片岩石股份岩石里的花岩石股吧岩石巨人魔岩石火山岩石材岩石圈范围路岩石矿物岩石岩石切割机红岩石岩石有哪些岩石与矿物岩石的种类狱岩石火岩石岩石破碎学岩石英文破碎岩石岩石是什么花岩石常见的岩石岩石的分类石灰岩石岩石的形成叶岩石什么是岩石岩石的意思风化岩石