サマリー：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jquery三級(jí)下拉菜單</title> <script type="text/javascript" src="../jquery-3.3.1.j
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三級(jí)下拉菜單</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(){
//隱藏二級(jí)與三級(jí)下拉菜單
$('.twobox,.threebox').hide();
//當(dāng)鼠標(biāo)移動(dòng)到包含二級(jí)菜單的一級(jí)菜單時(shí)顯示當(dāng)前二級(jí)菜單
$('.one>li').mouseover(function () {
$(this).find('.twobox').slideDown(500);
});
//當(dāng)鼠標(biāo)移出包含二級(jí)菜單的一級(jí)菜單時(shí)隱藏當(dāng)前的二級(jí)菜單
$('.one>li').mouseleave(function () {
$(this).find('.twobox').slideUp(500);
});
//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單是顯示當(dāng)前三級(jí)菜單
$('.twobox>li').mouseover(function () {
$(this).find('.threebox').slideDown(500);
});
//當(dāng)鼠標(biāo)移出包含三級(jí)菜單的二級(jí)菜單時(shí)隱藏當(dāng)前三級(jí)菜單
$('.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>
公司簡(jiǎn)介
<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>
添削の先生：滅絕師太添削時(shí)間：2018-12-29 09:41:44
先生のまとめ：你這個(gè)作業(yè)完成的比老師的還簡(jiǎn)單，代碼邏輯要掌握奧，必要的地方請(qǐng)敲上備注