摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三級下拉框</title> <script type="text/javascript" src="jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三級下拉框</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{margin:0px;padding:0px;}
.menu{
width:760px;
height:50px;
background: pink;
margin:20px auto;
border:1px solid #ccc;
border-radius: 5px;
color:#fff;
}
ul{
list-style: none;
}
ul li{
width:150px;
float:left;
font-size: 25px;
height:50px;
line-height: 50px;
border:1px solid #888;
text-align: center;
cursor: pointer;
}
.two li{
width:150px;
height:40px;
line-height: 40px;
background: pink;
position: relative;
border:1px solid #fff;
font-size:20px;
cursor:pointer;
}
.three{position: absolute;top:0;left:150px;}
.three>li{
width:150px;
height:35px;
line-height: 35px;
background: pink;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隱藏二級與三級下拉菜單
$('.two').hide()
$('.three').hide()
//當鼠標移動到包含二級菜單的一級菜單時顯示當前二級菜單
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(1000)
})
//當鼠標移出包含二級菜單的一級菜單時隱藏當前二級菜單
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(1000)
})
//當鼠標移動到包含三級菜單的二級菜單時顯示當前三級菜單
$('.two_1').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//當鼠標移出包含三級菜單的二級菜單時隱藏當前三級菜單
$('.two_1').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
<div class="menu">
<ul class="one"> <!-- 一級下拉菜單 -->
<li>首頁</li>
<li>產品
<ul class="two"> <!-- 二級下拉菜單 -->
<li>產品1</li>
<li class="two_1">產品2
<ul class="three"> <!-- 三級下拉菜單 -->
<li>產品2.1</li>
<li>產品2.2</li>
<li>產品2.3</li>
<li>產品2.4</li>
</ul>
</li>
<li>產品3</li>
<li>產品4</li>
</ul>
</li>
<li>公司新聞
<ul class="two">
<li>新聞1</li>
<li class="two_1">新聞2
<ul class="three">
<li>新聞2.1</li>
<li>新聞2.2</li>
<li>新聞2.3</li>
<li>新聞2.4</li>
</ul>
</li>
<li>新聞3</li>
<li>新聞4</li>
</ul>
</li>
<li>行業(yè)新聞</li>
<li>聯系我們</li>
</ul>
</div>
</body>
</html>
在寫二級下拉框的時候要使用相對定位
position:relative;
在寫三級下拉框的時候要使用絕對定位
position:absolute;
mouseover() 當鼠標指針位于元素上方時會發(fā)生mouseover事件
mouseleave() 當鼠標指針離開元素時會發(fā)生mouseleave事件
slideDown([speed][fn]) 下滑效果
slideUp([speed][fn]) 上滑效果
批改老師：天蓬老師批改時間：2018-11-28 23:59:58
老師總結：jQuery中通過幾個簡單的方法,就可以實現原生js中,需要寫的大量代碼,正好體現了jquery的設計思想: 寫得少,做得多