abstrak：總結：多練很重要，但是用心記住更重要。代碼：<!DOCTYPE html><html><head> <title>jQuery案例</title> <style type="text/css"> *{margin:0px; padding:0px;} .menu{ width:808px; he
總結：
多練很重要，但是用心記住更重要。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery案例</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.menu{
width:808px;
height: 35px;
margin:0px auto;
background: #ccc;
margin-top:20px;
color:#000;
border:1px solid #ffafc9;
border-radius: 5px;
}
ul{list-style: none;}
ul li{width:100px; height: 35px; line-height: 35px; text-align: center; float:left; border-right:1px solid #fff; cursor: pointer;}
#cl{border-right:none;}
.twobox li{
width: 100px;height: 30px;line-height: 30px;
background: #eee;color: #393939; font-size: 14px;
position: relative;border-bottom: 1px dotted #ffafc9;
}
.twobox li:hover {background: #000;color: #fff;}
.three {position: absolute; top: 0px;left: 100px;}
.three li {width: 120px;height: 30px;line-height: 30px;border: 0;}
</style>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//隱藏二級與三級菜單
$('.twobox').hide();
$('.three').hide();
//當鼠標移動到包含二級菜單的一級菜單時顯示當前二級菜單
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(300);
})
//當鼠標移出到包含二級菜單的一級菜單時隱藏當前二級菜單
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(300);
})
//當鼠標移動到包含三級菜單的二級菜單時顯示三級菜單
$('.two').mouseover(function(){
$(this).find('.three').slideDown(300);
})
//當鼠標移出包含三級菜單的二級菜單時隱藏三級菜單
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(300);
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one"> <!-- 一級下拉菜單 -->
<li>首頁</li>
<li >動畫
<ul class="twobox">
<li>MAD AWV</li>
<li class="two">MMD 3D
<ul class="three">
<li>舞蹈MMD</li>
<li>劇情MMD</li>
<li>原創(chuàng)模型</li>
<li>鏡頭配布</li>
</ul>
</li>
<li class="two">短片 手書 配音
<ul class="three">
<li>手書</li>
<li>五等分的新娘</li>
<li>殺戮天使</li>
<li>原創(chuàng)動畫</li>
</ul>
</li>
<li>綜合</li>
</ul>
</li>
<li>番劇
<ul class="twobox">
<li>連載動畫</li>
<li class="two">完結動畫
<ul class="three">
<li>中二病也要談戀愛</li>
<li>只有神知道的世界</li>
<li>我的英雄學院</li>
<li>約會大作戰(zhàn) OVA</li>
</ul>
</li>
<li>咨詢</li>
<li>官方延伸</li>
<li>新番時間表</li>
<li>番劇索引</li>
</ul>
</li>
<li>國創(chuàng)</li>
<li>鬼畜</li>
<li>數(shù)碼</li>
<li>直播</li>
<li id="cl">紀錄片</li>
</ul>
</div>
</body>
</html>
Guru membetulkan：韋小寶Masa pembetulan：2019-02-15 15:27:54
Rumusan guru：多練習記住的和你直接去用心硬記是不一樣的 多練習你可以還會從之前寫過的代碼中獲取到新的知識