abstrait：<!DOCTYPE html> <html> <head> <title>jq實(shí)現(xiàn)三級(jí)菜單</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jq實(shí)現(xiàn)三級(jí)菜單</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.twobox ,.three{display: none;}
div{
width: 200px;height: 200px;
background: #ccc;
margin: 30px auto;
}
/*ul{ list-style: none;}*/
</style>
</head>
<body>
<!-- 思路:通過(guò)選擇class就可以將列表顯示或者隱藏,暫時(shí)無(wú)序其他多余步驟; -->
<div>
<ul class="one">
<li>一級(jí)</li>
<li>一級(jí)
<ul class="twobox">
<li>二級(jí)</li>
<li class="two">二級(jí)
<ul class="three">
<li>三級(jí)</li>
<li>三級(jí)</li>
<li>三級(jí)</li>
<li>三級(jí)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
//當(dāng)鼠標(biāo)移動(dòng)到包含二級(jí)菜單的一級(jí)菜單時(shí)顯示當(dāng)前二級(jí)菜單
//mouseover 移上元素
//slideDown 以滑動(dòng)方式顯示隱藏元素;
// $('.one>li').mouseover(function(){
// $(this).find('.twobox').slideDown(500)
// })
//當(dāng)鼠標(biāo)移出包含二級(jí)菜單的一級(jí)菜單時(shí)隱藏當(dāng)前二級(jí)菜單
//mouseleave 鼠標(biāo)指針離開(kāi)元素;
//slideUp 以滑動(dòng)方式隱藏;
// $('.one>li').mouseleave(function(){
// $(this).find('.twobox').slideUp(500)
// })
// hover(over,out);鼠標(biāo)移上觸發(fā)一個(gè)函數(shù),移下觸發(fā)一個(gè)函數(shù);<br>
$('.one>li').hover(
function(){
//將當(dāng)前l(fā)i下面的twobox所隱藏的東西顯示出來(lái);
$(this).find('.twobox').slideDown(500)
},
function(){
$(this).find('.twobox').slideUp(500)
}
)
//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單時(shí)顯示當(dāng)前三級(jí)菜單
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//當(dāng)鼠標(biāo)移出包含三級(jí)菜單的二級(jí)菜單時(shí)隱藏當(dāng)前三級(jí)菜單
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</body>
</html>
Professeur correcteur：天蓬老師Temps de correction：2019-04-09 11:32:49
Résumé du professeur：三級(jí)菜單的實(shí)現(xiàn)有很多解決方案, jQuery無(wú)疑是最簡(jiǎn)單的, 當(dāng)然也可以將這個(gè)思路擴(kuò)展到無(wú)限級(jí)