????：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jquery三級下拉菜單</title> <script type="text/javascript" src="../jquery-3.3.1.j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三級下拉菜單</title>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.one{
width: 600px;
height: 30px;
border: 1px solid black;
}
.one li{
float: left;
margin-left: 10px;
background-color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//隱藏二級與三級下拉菜單
$('.twobox,.threebox').hide();
//當(dāng)鼠標(biāo)移動到包含二級菜單的一級菜單時顯示當(dāng)前二級菜單
$('.one>li').mouseover(function () {
$(this).find('.twobox').slideDown(500);
});
//當(dāng)鼠標(biāo)移出包含二級菜單的一級菜單時隱藏當(dāng)前的二級菜單
$('.one>li').mouseleave(function () {
$(this).find('.twobox').slideUp(500);
});
//當(dāng)鼠標(biāo)移動到包含三級菜單的二級菜單是顯示當(dāng)前三級菜單
$('.twobox>li').mouseover(function () {
$(this).find('.threebox').slideDown(500);
});
//當(dāng)鼠標(biāo)移出包含三級菜單的二級菜單時隱藏當(dāng)前三級菜單
$('.twobox>li').mouseleave(function () {
$(this).find('.threebox').slideUp(500);
});
});
</script>
<ul class="one">
<li>首頁</li>
<li>
產(chǎn)品
<ul class="twobox">
<li>1</li>
<li>2</li>
<li>
3
<ul class="threebox">
<li>55</li><br />
<li>55</li><br />
<li>55</li><br />
<li>55</li><br />
<li>55</li>
</ul>
</li>
<li>4</li>
</ul>
</li>
<li>
聯(lián)系我們
</li>
<li>
公司簡介
<ul class="twobox">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
產(chǎn)品介紹
</li>
<li>
售前咨詢
</li>
</ul>
</body>
</html>
?? ???：滅絕師太?? ??：2018-12-29 09:41:44
???? ??：你這個作業(yè)完成的比老師的還簡單，代碼邏輯要掌握奧，必要的地方請敲上備注