jQuery 3단계 드롭다운
안녕하세요 선생님, 글을 다 쓴 후 슬라이딩 오류가 발생했습니다. 무슨 일인가요?
Time2018-11-28 10:58:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery三级下拉菜单</title>
<style>
* {
여백: 0;
패딩: 0;
}
.menu {
너비: 800px;
높이: 30px;
배경색 : # 000000;
여백: 0 자동;
테두리 반경: 10px;
색상: #ffffff;
테두리: 1px 단색 #ccc;
margin-top: 20px;
}
ul {
목록 스타일: 없음;
}
ul li {
너비: 100px;
높이: 30px;
글꼴 크기: 14px;
줄 높이: 30px;
텍스트- 정렬: 중심;
부동: 왼쪽;
테두리 오른쪽: 1px 단색 #ffffff;
커서: 포인터;
}
.twobox li {
너비: 100px;
높이: 30px;
배경색: #ccc;
색상: #000;
글꼴 크기: 14px;
줄 높이: 30px;
위치: 상대;
테두리: 0px;
}
.twobox li:hover {
색상: #ffffff;
배경색: #000;
}
.3 {
위치: 절대;
위쪽: 0;
왼쪽: 100px ;
}
.3 리 {
너비: 99px;
높이: 30px;
줄 높이: 30px;
테두리: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".twobox").hide()
$(".twobox").hide()
//鼠标移动到包含two级菜单的一级菜单时显示
$(".one>li").mouseover(function(){
$(this).find(".twobox").slideDown(500)
})
//鼠标移除时隐藏
$(".one>li").mouseleave(function(){
$(this).find(".twobox").slideUp(500)
});
//当鼠标移动到包含三级菜单的新级菜单时显示
$(".two").mouseover(function(){
$(this).find(".two").slideDown(500)
})
//当鼠标移除时隐藏
$(".two").mouseleave(function(){
$(this).find(". three").slideUp(500)
})
})
//.find()遍历 .mouseover鼠标移动 .mouseleave鼠标移除 .slideDown()滑动方式 .slideUp()滑动方式隐藏ㅋㅋㅋ了很多时间 는 jQuery방면比较稳定
</script>
</head>
<body>
<div class="menu">
<ul class="one">
<li>홈페이지</li>
<li>Konoha
<ul class= "twobox ">
<li>사루토비 가문</li>
<li class="two">센쥬 가문
<ul class="two">
< li>아수라 오츠츠키< /li>
<li>센쥬 하시라마</li>
<li>센쥬 토비라마</li>
<li>센쥬 밧줄나무</li>
</ul>
< ;/li>
<li class="two">우치하 일족
<ul class="two">
< ;li>오츠츠키 인드라</li>
<li>우치하 마다라< ;/li>
<li>우치하 인드라</li>
<li>우치하 사스케</li>
<li>이와 닌자
<ul class="twobox">
<li>dust</li>
<li class="two">Shadow
<ul class="two">
<li>1세대</li>
