jQuery three-level drop-down
Hello teacher, after I finished writing, I had a sliding glitch. What's going on?
Hello teacher, after I finished writing, I had a sliding glitch. What's going on?
Time2018-11-28 10:58:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 800px;
height: 30px;
background-color: #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-align: center;
float: left;
border-right: 1px solid #ffffff;
cursor: pointer;
}
.twobox li {
width: 100px;
height: 30px;
background-color: #ccc;
color: #000;
font-size: 14px;
line-height: 30px;
position: relative;
border: 0px;
}
.twobox li:hover {
color: #ffffff;
background-color: #000;
}
.three {
position: absolute;
top: 0;
left: 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>Homepage</li>
<li>Konoha
<ul class="twobox">
<li>Sarutobi Clan</li>
<li class="two">Senju Clan
<ul class="three">
<li>Ashura Otsutsuki</li>
<li>Senju Hashirama</li>
<li>Senju Tobirama</li>
<li>Senju Rope Tree</ li>
</ul>
</li>
<li class="two">Uchiha clan
< ;ul class="three">
<li>Indra Otsutsuki</li>
<li>Madara Uchiha</li>
<li>Uchiha Izuna</li>
<li>Uchiha Sasuke</li>
</ul>
</li>
<li>Nara Clan</li>
</ul>
</li>
<li>Iwa Ninja
<ul class="twobox">
<li>dust</li>
<li class="two">Shadow
<ul class="three">
<li>First Generation</li>
<li>Second generation</li>
<li>Three</li>
<li>Empty</li>
</ul>
</li>
<li class="two">melt
<ul class="three"> ;
<li>Passenger A</li>
<li>Passenger B</li>
<li>Passenger C</ li>
<li>Passenger Ding</li>
</ul>
</li>
</ul>
</li>
<li>Sand Ninja</li>
<li>Mist Ninja< /li>
<li>Kuminin</li>
</ul>
</div>
< /body>
</html>
