引入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>
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
