84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
안녕하세요 선생님, 글을 다 쓴 후 슬라이딩 오류가 발생했습니다. 무슨 일인가요?
你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。
<!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;
글꼴 크기: 14px;
줄 높이: 30px;
텍스트- 정렬: 중심;
부동: 왼쪽;
테두리 오른쪽: 1px 단색 #ffffff;
커서: 포인터;
.twobox li {
배경색: #ccc;
색상: #000;
위치: 상대;
테두리: 0px;
.twobox li:hover {
배경색: #000;
.3 {
위치: 절대;
위쪽: 0;
왼쪽: 100px ;
.3 리 {
너비: 99px;
테두리: 0;
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
//隐藏二级三级菜单
$(".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">우치하 일족
< ;li>오츠츠키 인드라</li>
<li>우치하 마다라< ;/li>
<li>우치하 인드라</li>
<li>우치하 사스케</li>
<li>이와 닌자
<ul class="twobox">
<li>dust</li>
<li class="two">Shadow
<li>1세대</li>
소스 코드가 필요합니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!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>
< li>2세대</li> <li>3</li> <li> 비어 있음</li> </ul> </li> <li 클래스 ="two">Melt <ul class=" three"> <li> ;승객 A소스 코드가 필요합니다