abstract:總結(jié):多練很重要,但是用心記住更重要。代碼:<!DOCTYPE html><html><head> <title>jQuery案例</title> <style type="text/css"> *{margin:0px; padding:0px;} .menu{ width:808px; he
總結(jié):
多練很重要,但是用心記住更重要。
代碼:
<!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(){
//隱藏二級(jí)與三級(jí)菜單
$('.twobox').hide();
$('.three').hide();
//當(dāng)鼠標(biāo)移動(dòng)到包含二級(jí)菜單的一級(jí)菜單時(shí)顯示當(dāng)前二級(jí)菜單
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(300);
})
//當(dāng)鼠標(biāo)移出到包含二級(jí)菜單的一級(jí)菜單時(shí)隱藏當(dāng)前二級(jí)菜單
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(300);
})
//當(dāng)鼠標(biāo)移動(dòng)到包含三級(jí)菜單的二級(jí)菜單時(shí)顯示三級(jí)菜單
$('.two').mouseover(function(){
$(this).find('.three').slideDown(300);
})
//當(dāng)鼠標(biāo)移出包含三級(jí)菜單的二級(jí)菜單時(shí)隱藏三級(jí)菜單
$('.two').mouseleave(function(){
$(this).find('.three').slideUp(300);
})
})
</script>
</head>
<body>
<div class="menu">
<ul class="one"> <!-- 一級(jí)下拉菜單 -->
<li>首頁(yè)</li>
<li >動(dòng)畫
<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)動(dòng)畫</li>
</ul>
</li>
<li>綜合</li>
</ul>
</li>
<li>番劇
<ul class="twobox">
<li>連載動(dòng)畫</li>
<li class="two">完結(jié)動(dòng)畫
<ul class="three">
<li>中二病也要談戀愛</li>
<li>只有神知道的世界</li>
<li>我的英雄學(xué)院</li>
<li>約會(huì)大作戰(zhàn) OVA</li>
</ul>
</li>
<li>咨詢</li>
<li>官方延伸</li>
<li>新番時(shí)間表</li>
<li>番劇索引</li>
</ul>
</li>
<li>國(guó)創(chuàng)</li>
<li>鬼畜</li>
<li>數(shù)碼</li>
<li>直播</li>
<li id="cl">紀(jì)錄片</li>
</ul>
</div>
</body>
</html>
Correcting teacher:韋小寶Correction time:2019-02-15 15:27:54
Teacher's summary:多練習(xí)記住的和你直接去用心硬記是不一樣的 多練習(xí)你可以還會(huì)從之前寫過(guò)的代碼中獲取到新的知識(shí)