jquery简单的多级下拉菜单
2013-11-20 09:03
253 查看
引入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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery左侧带小图标的多级下拉菜单
- jQuery实现渐变下拉菜单的简单方法
- jquery实现多级下拉菜单的实例代码
- 简单的多级下拉菜单
- jQuery 多级下拉菜单解决方案
- JQuery -> 超级简单的下拉菜单
- jquery实现多级下拉菜单的实例代码
- 使用jquery 简单实现下拉菜单
- jQuery实现简单二级下拉菜单
- 简单jquery下拉菜单流畅版(转自www.jqueryba.com)
- 简单jquery下拉菜单流畅版
- jQuery cxSelect 多级联动下拉菜单
- 简单的jQuery的下拉菜单
- jQuery实现精美的多级下拉菜单特效
- 用jquery实现的一个超级简单的下拉菜单
- jquery实现简单的二级导航下拉菜单效果
- jQuery垂直手风琴多级下拉菜单代码http://www.lanrenzhijia.com/nav/4584.html
- jquery 无限级下拉菜单的简单实现代码
- 使用XMLDataSource简单实现多级下拉菜单