简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
jQuery-Dropdown mit drei Ebenen
Time
Time 2018-11-27 18:06:00
0
4
1125

Hallo Lehrer, nachdem ich mit dem Schreiben fertig war, hatte ich einen Schiebefehler. Was ist los?

Time
Time

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

Antworte allen(2)
Time
Time2018-11-28 10:58:31 2 Etage

<!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>首页</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>

</ul>

</li>

<li>奈良一族</li>

</ul>

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

</ul>

</li>

</ul>

</li>

<li>沙忍</li>

<li>雾忍</li>

<li>云忍</li>

</ul>

</div>

</body>

</html>


Wie +0
Antwort hinzufügen
  • Antwort //当鼠标移除时隐藏 $(".two").mouseleave(function(){ $(this).find(".three").hide() }) 将最后一个slideUp()换成hide()
    灭绝师太 Autor 2018-11-28 14:02:15
  • Antwort 老师你好 在二级菜单出现的最后还是还有一些不流畅 三级显示正常
    Time Autor 2018-11-28 15:41:50
灭绝师太
灭绝师太2018-11-28 09:26:06 1 Etage

我需要你的源码

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！