简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
jQuery 3단계 드롭다운
Time
Time 2018-11-27 18:06:00
0
4
1124

안녕하세요 선생님, 글을 다 쓴 후 슬라이딩 오류가 발생했습니다. 무슨 일인가요?

Time
Time

你想拥有你从未有过的东西 ,那么你必须去做你从未做过的事情。

모든 응답(2)
Time
Time2018-11-28 10:58:31 2층

<!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>

&lt ;/li>

<li class="two">우치하 일족

<ul class="two">

&lt ;li>오츠츠키 인드라</li>

<li>우치하 마다라&lt ;/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&gt ;승객 A

  • 승객 B

  • 승객 C

  • 승객 D

    • &lt ;li>샌드 닌자</li>

    <li>미스트 닌자< /li>

    <li>클라우드 닌자</li>

    </ul>

    </div>

    &lt ;/body>

    </html>

    좋다 +0
    답글 추가
    • 회신하다 //마우스가 제거되면 숨깁니다. $(".two").mouseleave(함수(){ $(this).find(".세").hide() }) 마지막 SlideUp()을 hide()로 교체합니다.
      灭绝师太 작가 2018-11-28 14:02:15
    • 회신하다 안녕하세요 선생님. 2단계 메뉴 끝 부분이 아직 불안정한 부분이 있습니다. 3단계 표시는 정상입니다.
      Time 작가 2018-11-28 15:41:50
    灭绝师太
    灭绝师太2018-11-28 09:26:06 1층

    소스 코드가 필요합니다

    좋다 +0
    답글 추가
    인기 주제
    더>
    인기 기사
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！