Time2018-11-28 10:58:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
マージン: 0;
パディング: 0;
}
.menu {
幅: 800px;
高さ: 30px;
背景-色: # 000000;
margin: 0 auto;
border-radius: 10px;
color: #ffffff;
border: 1px Solid #ccc;
margin-top: 20px;
}
ul {
list-style: none;
}
ul li {
width: 100px;
height: 30px;
font-size: 14px;
line-height: 30px;
text-整列: 中央;
浮動小数点: 左;
境界右: 1px ソリッド #ffffff;
カーソル: ポインタ;
}
.twobox li {
幅: 100px;
高さ: 30px;
背景色: #ccc;
カラー: #000;
フォントサイズ: 14px;
行の高さ: 30px;
位置: 相対;
境界線: 0px;
}
.twobox li:hover {
カラー: #ffffff;
背景色: #000;
}
.three {
位置: 絶対;
上: 0;
左: 100px ;
}
.three li {
width: 99px;
height: 30px;
line-height: 30px;
border: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".three").hide()
// ネズミ标移動へ包含二级菜单的一级菜单時显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
// ネズミ标移除時隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
//ネズミが三階層の菜を含む二階層の菜に移動すると表示
$(".two").mouseover(function(){
$(this).find(".three").slideDown(500)
})
//当鼠标移除時刻隐藏
$(".two").mouseleave(function(){
$(this).find(".three").slideUp(500)
})
})
//.find()遍历 .mouseoverネズミ标移移動 .mouseleaveマウス标移除 .slideDown()滑走方式 .slideUp()滑走方式隐藏
//总结在html方面出现卡壳浪费了很多時間间 在 jQuery 側比较稳定
</script>
</head>
<body>
<div class="menu">
<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>
<li class="two">うちは一族
<ul class="three">
<li>大筒木インドラ</li>
<li>うちはマダラ< ;/li>
<li>うちはインドラ</li>
<li>うちはサスケ</li>
<li>岩忍者
<ul class="twobox">
<li>ダスト</li>
<li class="two">シャドウ
<ul class="three">
<li>初代</li>
< ;li>砂の忍者</li> <li>霧の忍者< /li> <li>クラウド忍者</li> </ul></div> < ;/body></html>
