jq三级下拉菜单

abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三级下拉菜单</title> <script src="jquery-3.3.1.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.nav{
   width: 500px;
height: 50px;
margin: 0px auto;
}

ul li{ 
width: 50px;height: 50px;line-height: 50px;
text-align: center; float: left;  
position:relative; background: blue;
margin-top: -19px;}

.nav_2 li{
width: 50px;height: 50px;line-height: 50px ;
margin-top: 2px; }

ul{list-style: none; }
</style>

<script>
$(document).ready(function(){
$('.nav_2').hide()
$('.nav_3').hide()
//移上显示
$('.nav_1>li').mouseover(function(){
$(this).find('.nav_2').slideDown(500)
})
//移出
$('.nav_1>li').mouseleave(function(){
$(this).find('.nav_2').slideUp(500)
})
//移上显示
$('.nav_2').mouseover(function(){
$(this).find('.nav_3').slideDown(500)
})
$('.nav_2').mouseleave(function(){
$(this).find('.nav_3').slideUp(500)
})

})
</script>
</head>
<body>
<div>
<ul><!-- 一级 -->
<li>首页</li>
<li>一级
<ul>

<li>二级
<ul>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li> 二级</li>
</ul>
</li>
</ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>

语法比较好理解，先把二级，三级菜单用hide()方法隐藏。当鼠标移上去使用slideDown显示(slideUp/隐藏)。

Correcting teacher：灭绝师太Correction time：2018-11-08 14:33:08
Teacher's summary：实际操作的时候只要逻辑搞清楚了，还是非常简单的，继续加油

jq三级下拉菜单

Popular Entries