abstract：<!DOCTYPE html> <html> <head> <title>jq實現(xiàn)三級菜單</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jq實現(xiàn)三級菜單</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>
<!-- 思路:通過選擇class就可以將列表顯示或者隱藏,暫時無序其他多余步驟; -->
<div>
<ul class="one">
<li>一級</li>
<li>一級
<ul class="twobox">
<li>二級</li>
<li class="two">二級
<ul class="three">
<li>三級</li>
<li>三級</li>
<li>三級</li>
<li>三級</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
//當(dāng)鼠標(biāo)移動到包含二級菜單的一級菜單時顯示當(dāng)前二級菜單
//mouseover 移上元素
//slideDown 以滑動方式顯示隱藏元素;
// $('.one>li').mouseover(function(){
// $(this).find('.twobox').slideDown(500)
// })
//當(dāng)鼠標(biāo)移出包含二級菜單的一級菜單時隱藏當(dāng)前二級菜單
//mouseleave 鼠標(biāo)指針離開元素;
//slideUp 以滑動方式隱藏;
// $('.one>li').mouseleave(function(){
// $(this).find('.twobox').slideUp(500)
// })
// hover(over,out);鼠標(biāo)移上觸發(fā)一個函數(shù),移下觸發(fā)一個函數(shù);<br>
$('.one>li').hover(
function(){
//將當(dāng)前l(fā)i下面的twobox所隱藏的東西顯示出來;
$(this).find('.twobox').slideDown(500)
},
function(){
$(this).find('.twobox').slideUp(500)
}
)
//當(dāng)鼠標(biāo)移動到包含三級菜單的二級菜單時顯示當(dāng)前三級菜單
$('.two').mouseover(function(){
$(this).find('.three').slideDown(500)
})
//當(dāng)鼠標(biāo)移出包含三級菜單的二級菜單時隱藏當(dāng)前三級菜單
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-04-09 11:32:49
Teacher's summary：三級菜單的實現(xiàn)有很多解決方案, jQuery無疑是最簡單的, 當(dāng)然也可以將這個思路擴展到無限級